v-if和v-show有什么区别

相同点 : 两者都是判断dom节点是否显示
不同点：

• 实现方式

  v-if是根据值的真假判断是否要对元素节点从dom树上删除或重建，v-show只是修改元素节点的css样式，也就是display的值，元素始终在dom树上

• 编译过程

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

• 编译条件

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

• 性能消耗

  v-if 有更高的切换消耗， 不适合做频繁的切换； v-show 有更高的初始渲染消耗， 适合做频繁的额切换。