v-if、v-show、v-html 区别？

v-if、v-show、v-html 的原理：

• v-if 会调用 addIfCondition 方法, 生成 vnode 的时候会忽略对应节点, render 的时候就不会渲染
• v-show 会生成 vnode, render 的时候也会渲染成真实节点, 只是在 render 过程中会在节点的属性中修改 show 属性值, 也就是常说的 display
• v-html 会先移除节点下的所有节点, 调用 html 方法, 通过 addProp 添加 innerHTML 属性, 归根结底还是设置 innerHTML 为 v-html 的值

v-if：

• 用于条件性地渲染元素或组件。
• 当条件为真时，元素或组件被渲染到DOM中，当条件为假时，元素或组件不会被渲染到DOM中，实际上是动态添加或删除元素。
• 适用于根据条件显示或隐藏元素。

v-show：

• 用于根据条件切换元素的可见性。
• 无论条件是真还是假，元素始终会被渲染到DOM中，但是通过CSS的display属性来控制元素的可见性。
• 适用于需要在不同条件之间切换元素的可见性，但不希望频繁添加或删除元素。

v-html：

• 用于将元素的innerHTML设置为指定的HTML字符串。
• 它可以用来渲染包含HTML标记的文本内容，但要小心防止XSS攻击，确保渲染的内容是受信任的。

v-if 和 v-show 的区别：

• 手段: 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 适合频繁切换