v-if与v-show
他们的相同点都是控制元素的显示和隐藏
不同点
-
v-show 本质就是通过css中的display设置元素的显示隐藏。
-
v-if 是动态的向DOM树内添加或者删除DOM元素
两者编译的区别
-
v-show 控制css
-
v-if切换有一个局部的编译和卸载的过程，切换过程中会销毁和重建内部的事件监听和子组件。
编译条件
- v-show始终会编译，初始值为false，只是将display 设置为none。
- v-if初始值为false，就不会编译了。
性能比较
v-show 只编译一次，后面每次切换只是控制display的值，而v-if 会不断的创建与销毁，此时在性能上v-show优势较为明显。
使用场景 如果要频繁切换某节点时,使用 v-show (无论 true 或者 false 初始都会进行渲染,此后通过 css 来控制显示隐藏,因此切换开销比较小,初始开销较大),如果不需要频繁切换某节点时,使用 v-if (因为懒加载,初始为 false 时,不会渲染,但是因为它是通过添加和删除 dom 元素来控制显示和隐藏的,因此初始渲染开销较小,切换开销比较大)
