What is better in vue.js 2, use v-if or v-show?
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.
Short answer:
Use v-if
if the condition won't change that often.
Use v-show
if you want to toggle the condition more often.
Note: v-show
does not remove the element from the DOM if your condition is false. So people can see it when they inspect your page.
Adding that usage of 'v-if' can have unexpected consequences, since it connects and disconnects elements from the DOM instead of modifying the elements' display.
For example, if you use it on a form and end up toggling that form off using v-if, you will receive this browser console warning:
“Form submission canceled because the form is not connected”
If you use 'v-show', you won't encounter this problem.