v-if
作用：根据条件动态创建或销毁 DOM 元素。
原理：v-if 实际上是按需渲染的，它会根据表达式的真假值来决定是否在 DOM 树中插入或移除元素。如果条件为 false，该元素不会存在于 DOM 中。
性能：因为 v-if 会真正地添加或移除元素，因此它在初次渲染时的开销较大，特别是当需要频繁切换时会有更多的 DOM 操作。但它在初始渲染时没有不必要的元素开销，适合那些在条件变化不频繁时使用。
核心机制：
- Vue 在渲染时会通过观察条件表达式，决定是否在虚拟 DOM 中创建或删除对应的节点。
- 当条件改变时，Vue 会进行比较，更新真实的 DOM 树，插入或删除元素。
v-show
作用：根据条件控制元素的可见性，但不会真正移除或添加 DOM 元素。
原理：v-show 通过简单的 CSS 样式 (display: none) 来控制元素的显示或隐藏。元素始终存在于 DOM 中，Vue 只是在条件为 false 时将其隐藏。
性能：相比 v-if，v-show 切换开销较小，因为它不会引起 DOM 的增删操作，只是修改样式。适合频繁切换显示状态的场景。
核心机制：
- Vue 只在第一次渲染时插入元素，不论条件表达式是否为
true。 - 随着条件改变，Vue 仅仅通过修改元素的
display样式来控制其可见性。
v-html
作用：将原始的 HTML 字符串插入到元素中，并渲染为实际的 HTML 内容。
原理：v-html 会将指定的 HTML 字符串作为内联内容插入到元素中。注意，使用 v-html 会替换掉元素的原有内容。
安全性：因为它会将 HTML 字符串直接插入到页面中，因此容易导致 XSS 攻击（跨站脚本攻击）。使用时需要确保内容的安全性。
核心机制：
- Vue 会监控传递给
v-html的表达式，并在值更新时直接将该 HTML 字符串插入到元素的innerHTML属性中。 - 虽然 Vue 对表达式的值会进行响应式处理，但插入的 HTML 本身不会被 Vue 编译为模板，因此不会有响应式绑定。