面试题：Vue 中 v-if、v-show 和 v-html 的原理是什么？

在 Vue 中，v-if、v-show 和 v-html 是常用的指令，它们分别用于条件渲染、显示/隐藏元素和动态插入 HTML 内容。以下是它们的原理和实现机制：

1. `v-if` 的原理

v-if 用于条件渲染，根据表达式的值决定是否渲染元素。

实现原理：

编译阶段：Vue 的模板编译器会将 v-if 转换为一个条件表达式。
渲染阶段：
- 如果 v-if 的表达式为 true，则渲染对应的元素。
- 如果为 false，则不会渲染该元素（从 DOM 中移除）。
销毁与重建：当 v-if 的值发生变化时，Vue 会销毁或重新创建对应的 DOM 元素。

示例：

<template>
  <div>
    <p v-if="isVisible">显示内容</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true,
    };
  },
};
</script>

底层实现：

Vue 会生成一个条件块（if 语句），根据 v-if 的值决定是否渲染元素。
当 v-if 的值变化时，Vue 会触发组件的重新渲染。

2. `v-show` 的原理

v-show 用于控制元素的显示/隐藏，通过 CSS 的 display 属性实现。

实现原理：

编译阶段：Vue 的模板编译器会将 v-show 转换为一个样式绑定。
渲染阶段：
- 如果 v-show 的表达式为 true，则设置 display 为原始值（如 block、inline 等）。
- 如果为 false，则设置 display: none。
DOM 保留：无论 v-show 的值如何变化，元素始终存在于 DOM 中，只是通过 CSS 控制其显示状态。

示例：

<template>
  <div>
    <p v-show="isVisible">显示内容</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true,
    };
  },
};
</script>

底层实现：

Vue 会生成一个样式绑定，动态设置 display 属性。
当 v-show 的值变化时，Vue 会更新元素的 display 样式。

3. `v-html` 的原理

v-html 用于将数据作为 HTML 插入到元素中。

实现原理：

编译阶段：Vue 的模板编译器会将 v-html 转换为一个属性绑定。
渲染阶段：
- Vue 会将 v-html 的值作为 HTML 字符串，插入到元素的 innerHTML 中。
安全性：直接插入 HTML 可能存在 XSS 攻击风险，因此需要确保数据来源可信。

示例：

<template>
  <div>
    <p v-html="htmlContent"></p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      htmlContent: '<span style="color: red;">红色文字</span>',
    };
  },
};
</script>

底层实现：

Vue 会通过 el.innerHTML 将 v-html 的值插入到元素中。
如果 v-html 的值发生变化，Vue 会更新元素的 innerHTML。

4. `v-if` 和 `v-show` 的区别

特性	`v-if`	`v-show`
渲染机制	条件为 `false` 时销毁 DOM 元素	始终保留 DOM 元素，通过 CSS 控制显示/隐藏
性能开销	切换时涉及 DOM 的销毁与重建	切换时仅修改 CSS，性能开销较小
适用场景	适合条件变化较少的场景	适合频繁切换显示/隐藏的场景