vue v-if && v-show && v-html实现原理以及区别

v-if：

v-if会先调用addIfCondition方法，生成vnode的时候会忽略对应节点，render的时候就不会渲染。

v-show：

v-show会生成vnode，render的时候也会渲染成真实节点，只是在render过程中会在节点的属性中修改show属性值，也就是常说的display。

v-html：

v-html会先移除节点下的所有节点，调用html方法，通过addProp添加innerHTML属性，归根结底还是设置innerHTML为v-html的值。

总结：

v-if 和 v-show它们有同样效果，但它们的工作方式是不同的， 关键区别在于 v-if 有条件地渲染元素，而 v-show 有条件地显示元素。

• 这意味着 v-if 在切换条件时实际上会销毁和重新创建元素。同时，v-show 始终将元素保留在 DOM 中，并且只会通过更改其 CSS 来切换其显示。
• v-show 切换的时候不会触发组件的生命周期。 v-if 由 false 变为 true 会触发组件的beforeCreate、create、beforeMount、mounted 钩子（跟组件的初始化执行的钩子一致），由 true 变为 false 会触发组件的 beforeDestory、destoryed 钩子。
• v-if 具有更高的切换成本（每当条件更改时），v-show 具有更高的初始渲染成本。
• 使用 v-if 允许我们将其他逻辑块与它结合使用