Vue.js 中的 v-if 和 v-show 有什么区别？

v-if 和 v-show 都是 Vue.js 中的条件渲染指令,区别在于:

v-if:

1. 会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
2. 条件块内的渲染过程会被跳过,直到条件变为真时才会开始。
3. 初始渲染时有更高的切换开销,适用于运行时条件不太可能改变的场景。

v-show:

1. 不管初始条件是什么,元素总是会被渲染,仅是简单地基于 CSS 进行切换。
2. 条件变化时,只是触发一次 DOM 更新,渲染开销较小,适用于频繁切换条件的场景。
3. 无法保证在条件变化时相应事件和子组件会被正确触发或销毁。

示例:

v-if:

html
<h1 v-if="seen">Hello!</h1>
v-show:

html
<h1 v-show="seen">Hello!</h1>  

js
data: {
  seen: true
}

当 seen 变为 false 时:
v-if 会移除 h1 并销毁相关的事件监听器和子组件。
v-show 会给 h1 添加 display: none,相应的事件监听器和子组件会被保留。
v-if 适用于运行时条件不大可能改变的场景,v-show 适用于频繁切换条件的场景。