11. v-if、v-show、v-html 的原理和区别？

11. 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 和 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 适合频繁切换