vue源码解读--派发更新

目录导航

上一节我们分析了依赖收集的过程，当访问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被修正为'周五是等放假的一天'