汪微的博客
zane,做一个有思维的开发者

汪微的博客

vue.js源码解读系列 - vue的vdom及其diff算法

2018年04月06日244 browse

vue的vdom和vnode是实现界面更新的核心,此处我们从watcher通知更新开始说起:

core/instance/lifecycle.js

//watcher 驱动视图更新的核心方法
updateComponent = () => {
      vm._update(vm._render(), hydrating)
}

vm._render()最终返回新的vnode节点,vue会拿着此节点与之前缓存的vnode进行diff的过程。


调用__patch__进行diff过程


vm.__patch__最终会调用  core/vdom/path.js 中的 createPatchFunction 进行真正的diff过程



实际的diff过程我就不写了,这里给推荐两篇写的很不错的文章:

1、解析vue2.0的diff算法

2、VirtualDOM与diff(Vue实现)


博主 zane 发表于 2018-04-06 19:58:11,添加在了 vue 标签下

打赏

您的支持将鼓励我继续努力与分享。

扫码打赏,建议金额1-10元

提醒:打赏金额将直接进此方账号,无法退款,请您谨慎操作。

评论

正在加载验证码......

提交