What is better in vue.js 2, use v-if or v-show?

Jedidias picture Jedidias · Feb 23, 2017 · Viewed 14.2k times · Source

I'm working in a project with vue 2. I need to know in which case the performance is better: Use v-if or v-show?. I have a long list and each item's list has a form hidden that I need show and hide to click a button that has each item list. What is better a toggle class of v-show or add and remove the form with v-if?

Answer

bypatryk picture bypatryk · Jun 1, 2017

tl;dr

Assuming the question is strictly about performance:

  • v-show: expensive initial load, cheap toggling,
  • v-if: cheap initial load, expensive toggling.

Evan You provided a more in depth answer at VueJS Forum.

v-show always compiles and renders everything - it simply adds the "display: none" style to the element. It has a higher initial load cost, but toggling is very cheap.

Incomparison, v-if is truely conditional: it is lazy, so if its initial condition is false, it won't even do anything. This can be good for initial load time. When the condition is true, v-if will then compile and render its content. Toggling a v-if block actually tearsdown everything inside it, e.g. Components inside v-if are acually destroyed and re-created when toggled, so toggling a huge v-if block can be more expensive than v-show.