v-show与v-if的区别?
思路
- 手段
- 编译过程
- 编译条件
- 性能消耗
- 使用场景
- 原理
手段
- v-if是动态的向DOM树内添加或者删除DOM元素。
- v-show是通过设置DOM元素的display样式属性控制显隐。
编译过程
- v-show只是简单的基于css切换。
- v-if切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部的事件监听和子组件。
- 可通过打印父子之间生命周期进行测试
编译条件
- v-if是惰性的，如果初始条件为false,则什么也不做；只有在条件第一次变为true时才开始局部编译。
- v-show是在任何条件下，无论编译条件为true/false都会编译，缓存，DOM元素保留。
性能消耗
- v-if有更高的切换消耗。
- v-show有更高的初始渲染消耗。
使用场景
- v-if适合编译条件不太可能改变下使用。
- v-show适合频繁切换下使用。
