前端每日一题（10.21题目+10.20答案）

说一下 v-if 与 v-show 的区别

参考答案：

• 共同点：都是动态显示 DOM 元素

• 区别点:

• 手段

  v-if 是动态的向 DOM 树内添加或者删除 DOM 元素

  v-show 是通过设置 DOM 元素的 display 样式属性控制显隐

• 编译过程

  v-if  切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件

  v-show 只是简单的基于 css 切换

• 编译条件

  v-if  是惰性的，如果初始条件为假，则什么也不做。只有在条件第一次变为真时才开始局部编译

  v-show 是在任何条件下(首次条件是否为真)都被编译，然后被缓存，而且 DOM 元素保留

• 性能消耗

  v-if  有更高的切换消耗

  v-show 有更高的初始渲染消耗

• 使用场景

  v-if  适合运营条件不大可能改变

  v-show 适合频繁切换