美文网首页
vue源码解读--派发更新

vue源码解读--派发更新

作者: 习惯水文的前端苏 | 来源:发表于2021-01-22 14:47 被阅读0次

    目录导航

    上一节我们分析了依赖收集的过程,当访问data时将触发get;这一节我们来尝试分析派发更新的过程,即更新data时触发的set做了什么

    示例代码如下

    打开控制台,第一次页面渲染的值是

    当组件mounted之后,调用this._data.meta.msg='周五是等放假的一天'后,页面上渲染的结果就变成了

    之所以有这样的变化就是因为,callHooks mounted的调用是在页面已经经过update将vnode patch为dom之后,因此第一次是初始值"腊八节快乐呀",当调用callHook执行mounted之后,由于我们已经完成了依赖收集,故对msg的修改将触发响应,即派发更新

            \bullet 如果两次的值相等,则什么也不做

            \bullet 如果发现新值又是一个对象,那么将其变成响应式的

            \bullet 最后调用dep.notify派发广播

                \star this.subs是保存的订阅者watcher

                \star 调用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被修正为'周五是等放假的一天'

    相关文章

      网友评论

          本文标题:vue源码解读--派发更新

          本文链接:https://www.haomeiwen.com/subject/tladzktx.html