100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > 当数据改变时 VUE是如何实现DOM更新的?

当数据改变时 VUE是如何实现DOM更新的?

时间:2021-03-15 19:47:44

相关推荐

当数据改变时 VUE是如何实现DOM更新的?

这是我自己写的一个demo,message是响应式的,当其改变的时候就会触发DOM更新,我通过一个点击事件来模拟数据改变,然后探究一下,我们的DOM是如何更新的?

dep.notify

我们的data对象已经通过Object.defineProperty实现了setter, 那么当我们的message改变的时候,代码会立刻执行到这里

那么就会到Dep实例的notify方法,然后在这个方法中会循环一个subs的数组,这个数组是实例的一个属性,数组里存的是我们的Watcher,所谓Watcher就是data 对象的属性在被访问的时候,会给每一个属性维护一个Watcher实例。 从数组中遍历然后执行单个Watcher的update方法。然后在update方法中执行queueWatcher。这个函数中会维护一个异步更新队列。然后去执行nextTick(flushSchedulerQueue)方法,

flushSchedulerQueue方法中又会去执行Watcher的run方法。

然后在run方法中执行watcher的get方法。这个get方法很重要。

里面记录了一个非常重要的参数getter, 这个参数实际上就是vm.update(vm.render()), 然后执行getter。

update

在执行getter的过程,也就是vue的 render、 update的过程,也是生成vnode,转化为真实DOM的过程。update执行完了以后,我们的DOM也就更新了。

最后

这个过程是自己在通过浏览器打断点的方式一步一步的调试出来的,虽然之前也看过网上很多关于vue的源码解析,但大多都是隔靴搔痒,并没有对自己形成一个深刻的理解。所以,我想通过这种方式来加深自己对vue的一种理解。各位路过的大神们请多多指点!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。