上一节我们分析了依赖收集的过程,当访问data时将触发get;这一节我们来尝试分析派发更新的过程,即更新data时触发的set做了什么
示例代码如下
打开控制台,第一次页面渲染的值是
当组件mounted之后,调用this._data.meta.msg='周五是等放假的一天'后,页面上渲染的结果就变成了
之所以有这样的变化就是因为,callHooks mounted的调用是在页面已经经过update将vnode patch为dom之后,因此第一次是初始值"腊八节快乐呀",当调用callHook执行mounted之后,由于我们已经完成了依赖收集,故对msg的修改将触发响应,即派发更新
如果两次的值相等,则什么也不做
如果发现新值又是一个对象,那么将其变成响应式的
最后调用dep.notify派发广播
this.subs是保存的订阅者watcher
调用watcher的update派发更新,update接收到dep发出的广播之后调用queueWatcher
queueWatcher向queue中push了一位,并调用nextTick,将flushSchedulerQueue方法作为回调传入
nextTick中将flushSchedulerQueue推入callbacks
当callbacks被遍历执行时,实际上执行的是flushSchedulerQueue函数
可以看到,他对每一个queue成员(watcher)调用了before方法,即在实例化watcher时传入的,并通知用户开始进行更新流程
接着调用watcher.run方法,在run方法中又执行了this.get()方法
this.getter即在实例化watcher时传入的
因此进入render和update过程,msg被修正为'周五是等放假的一天'
网友评论