3.4.1　面试技巧与解析（一）

面试官：v-if和v-show有什么区别？

应聘者：

（1）相同点：两者都是在判断DOM节点是否要显示。

（2）不同点：

①实现方式。v-if是根据后面数据的真假值，判断直接从DOM树上删除或重建元素节点；v-show只是修改元素的CSS样式，也就是display的属性值，元素始终在DOM树上。

②编译过程。v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单地基于CSS切换。

③编译条件。v-if是惰性的，如果初始条件为假，则什么也不做，只有在条件第一次变为真时才开始局部编译；v-show是在任何条件下（无论首次条件是否为真）都被编译，然后被缓存，而且DOM元素始终被保留。

④性能消耗。v-if有较高的切换消耗，不适合做频繁的切换；而v-show有较高的初始渲染消耗，适合做频繁的切换。