v-if 和 v-show 指令的区别

v-if 和 v-show 都可以控制 DOM 元素的显示和隐藏，但是二者有一些区别如下：

v-show 其实时在控制 css，使标签 display：none 来隐藏。

v-if 是每次都会重新删除和创建元素，它是动态的向DOM树添加或删除DOM元素。

---

v-show 有较高的初始性能消耗，因为v-show控制的元素不管显示还是不显示，都会编译，v-show 的初始值为 false 的标签，只是css属性设置为 display：none了，但它一开始也编译了，所以说 v-show 有较高的初始性能消耗。

v-if 有较高的切换性能消耗，v-if 初始值为false的时候，对应的标签就不会编译了，随v-if属性值的变化，其背后是不断的创建和删除DOM元素，所以说 v-if 有较高的切换性能消耗。

---

综上：如果元素涉及到频繁的切换，最好使用 v-show，因为它是一次编译，后面的切换都是该css样式。但是如果有的元素永远都不会被显示出来被用户看到，则推荐用 v-if，那样指定的元素直接就不需要编译了。