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 允许我们将其他逻辑块与它结合使用