1、v-if 的特点:
- 实现方式:根据后面数据的真假判断是否重新删除或创建元素。
- 性能消耗:有较高的切换性能消耗。
- 编译过程:v-if 切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部的事件监听和子组件。
2、v-show的特点:
- 实现方式:每次不会重新进行DOM的删除和创建操作,只是切换了元素的 display:none 样式 。
- 性能消耗:有较高的初始渲染消耗。
- 编译过程:v-show是在任何条件下(首次条件是否为真)都被编译,然后被缓存,而且DOM元素保留。
注意:
① 如果元素设计到频繁的切换,最好不要使用v-if,而是推荐使用v-show。
② 如果元素可能永远也不会被显示出来,则推荐使用 v-if。