v-if 和 v-show 的区别，哪个性能更好？

v-if和v-show的区别

当条件不成立时，v-if不会渲染DOM元素，v-show操作的是样式(display)，切换当前DOM的显示和隐藏。

相同点：

• 都是控制内容的显示和隐藏

不同点：

• v-show：
  • 设置css属性中的display为none
  • 会编译，只是初始值为false，所以将display设置为none
  • 只编译一次，性能好一些
  • 适用于频繁切换某节点时，切换性能消耗小，但是初始性能消耗大
• v-if：
  • dom树中添加或删除dom元素
  • 如果初始值为false时不会编译
  • 不停的创建和销毁，性能差一点
  • 初始渲染开销小，但是切换开销大

性能

v-show只编译一次，后面其实就是控制css，而v-if不停的销毁和创建，故v-show性能更好一点。

使用场景

v-if : 不需要频繁切换的场景
v-show :  需要非常频繁切换的场景

• 项目程序比较小: v-if和v-show都可以用来进行判断展示和隐藏（这种场景使用v-if只是影响不大，并不是没有影响）；
• 项目程序比较大: 不推荐使用v-if来进行判断展示和隐藏，推荐使用v-show；