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 允许我们将其他逻辑块与它结合使用
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值