2021-07-19

Vue中v-if和v-show指令的共同点和不同的？

1. 相同点：
   v-show和v-if都能控制元素的显示和隐藏
2. 不同点
   实现本质方法不同：
   v-show的本质是通过设置css中的display设置为none，控制隐藏
   v-if是动态向DOM树内添加或者删除DOM元素。
3. 适用场景：
   如果要频繁切换某节点时，使用 v-show（无论 true 或者 false 初始都会进行渲染，此后通过 css 来控制显示隐藏，因此切换开销比较小，初始开销较大），如果不需要频繁切换某节点时，使用 v-if（因为懒加载，初始为 false 时，不会渲染，但是因为它是通过添加和删除 dom元素来控制显示和隐藏的，因此初始渲染开销较小，切换开销比较大）。