思考:vnode 之于 Vue 的作用

vnode就是Vue 中的 虚拟 dom 。为什么会有虚拟 DOM 这么一个概念呢?

因为 JS 引擎是单线程的,而直接频繁的操作和渲染 DOM 时,又是比较消耗性能的,所以由此引发的思考就是:能不能用 JS 先进行一系列的计算和整合,再 patch 到 真实的DOM 上,这样极大地利用了 JS 执行速度快的优势,也能减少直接操作 DOM,从而达到能够很好地提高性能的这样一个目的。然后 vnode就诞生了。

vnode 是用 JS 对象来模拟的一个 DOM 树结构,在真实的 DOM 节点发生改变时,将改变映射到vnode,然后利用 diff 算法和key对vnode进行比对,比对出最小改动最小的 DOM,最后异步渲染将改变最终对应到真实的 DOM 上,即以最小的成本来更新 DOM。

Vue 利用 vnode这样的一个 JS 对象,一方面对 DOM 结构有了一份 JS 解析,一方面在接收到 DOM 修改时,生成一份新的 vnode,Vue 能够利用这份新 vnode 与旧 vnode 进行比对,在直接修改 DOM 之前,做一层拦截和过滤,帮助 Vue 在渲染 DOM 时,提高了性能。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值