本文摘自PHP中文网,作者醉折花枝作酒筹,侵删。
最近看了不少Vue原理的文章,在这些文章的帮助下,我也多次尝试自己理解Vue的源码。终于,我觉得是时候自己输出一下内容了,希望可以从不同于其他文章的角度带大家熟悉Vue。Dep
1 2 3 4 |
|
Dep 的含义,自然就是 dependency(也就是依赖,一个计算机领域的名词)。
就像编写 node.js 程序,常会使用 npm 仓库的依赖。在 Vue 中,依赖具体指的是响应式处理后的数据。后面会提到,响应式处理的关键函数之一是在很多 Vue 原理文章都会提到的 defineReactive。
Dep 与每个响应式数据绑定后,该响应式数据就会成为一个依赖(名词),下面介绍 Watcher 时会提到,响应式数据可能被 watch、computed、在模板中使用 3 种情况依赖(动词)。
subs
Dep 对象下有一个 subs 属性,是一个数组,很容易猜出,就是 subscriber(订阅者)列表的意思咯。订阅者可能是 watch 函数、computed 函数、视图更新函数。
Watcher
Watcher 是 Dep 里提到的订阅者(不要和后面的 Observer 观察者搞混)。
因为 Watcher 的功能在于及时响应 Dep 的更新,就像一些 App 的订阅推送,你(Watcher)订阅了某些资讯(Dep),资讯更新时会提醒你阅读。
deps
与 Dep 拥有 subs 属性类似,Watcher 对象也有 deps 属性。这样构成了 Watcher 和 Dep 就是一个多对多的关系,互相记录的原因是当一方被清除的时候可以及时更新相关对象。
Watcher 如何产生
上面多次提到的 watch、computed、渲染模板产生 Watcher,在 Vue 源码里都有简明易懂的体现:
- mountComponent 的 vm._watcher = new Watcher(vm, updateComponent, noop);
- initComputed 的 watchers[key] = new Watcher(vm, getter || noop, noop, computedWatcherOptions)
- $watcher 的 var watcher = new Watcher(vm, expOrFn, cb, options);
Observer
Observer 是观察者,他负责递归地观察(或者说是处理)响应式对象(或数组)。在打印出的实例里,可以注意到响应式的对象都会带着一个 __ob__,这是已经被观察的证明。观察者没有上面的 Dep 和 Watcher 重要,稍微了解下就可以了。
walk
Observer.prototype.walk 是 Observer 初始化时递归处理的核心方法,不过此方法用于处理对象,另外还有 Observer.prototype.observeArray 处理数组。
核心流程
按照上面几个概念的关系,如何搭配,该如何实现数据响应式更新?
首先定下我们的目标:自然是在数据更新时,自动刷新视图,显示最新的数据。
这就是上面提到的 Dep 和 Watcher 的关系,数据是 Dep,而 Watcher 触发的是页面渲染函数(这是最重要的 watcher)。
但是新问题随之而来,Dep 怎么知道有什么 Watcher 依赖于他?
Vue 采用了一个很有意思的方法:
在运行 Watcher 的回调函数前,先记下当前 Watcher 是什么(通过 Dep.target)
运行回调函数中用到响应式数据,那么必然会调用响应式数据的 getter 函数
在响应式数据的 getter 函数中就能记下当前的 Watcher,建立 Dep 和 Watcher 的关系
之后,在响应式数据更新时,必然会调用响应式数据的 setter 函数
基于之前建立的关系,在 setter 函数中就能触发对应 Watcher 的回调函数了
代码
上述逻辑就在 defineReactive 函数中。这个函数入口不少,这里先讲比较重要的 observe 函数。
在 observe 函数中会 new Observer 对象,其中使用 Observer.prototype.walk 对对象中的值进行逐个响应式处理,使用的就是 defineReactive 函数。
因为 defineReactive 函数太重要了,而且也不长,所以直接贴到这边讲比较方便。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
|
首先每个响应式的值都是一个“依赖",所以第一步我们先借闭包的能力给每个值造一个 Dep。(到 Vue 3 就不需要闭包啦)
接着看核心的三个参数:
obj 当前需要响应式处理的值所在的对象
key 值的 key
val 当前的值
这个值还可能之前就定义了自己的 getter、setter,所以在做 Vue 的响应式处理时先处理原本的 getter、setter。
上面在核心流程中提到在 getter 函数会建立 Dep 和 Watcher 的关系,具体来说依靠的是 dep.depend()。
下面贴一下 Dep 和 Watcher 互相调用的几个方法:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
|
通过这几个函数,可以领略到了 Dep 和 Watcher 错综复杂的关系……不过看起来迂回,简单来说,其实做的就是上面说的互相添加到多对多列表。
你可以在 Dep 的 subs 找到所有订阅同一个 Dep 的 Watcher,也可以在 Watcher 的 deps 找到所有该 Watcher 订阅的所有 Dep。
但是里面还有一个隐藏问题,就是 Dep.target 怎么来呢?先放一放,后会作出解答。先接着看看 setter 函数,其中的关键是 dep.notify()。
1 2 3 4 5 6 7 |
|
不难理解,就是 Dep 提醒他的订阅者列表(subs)里的所有人更新,所谓订阅者都是 Watcher,subs[i].update() 调用的也就是 Watcher.prototype.update。
那么来看一下 Watcher 的 update 做了什么――
1 2 3 4 5 6 7 8 9 |
|
在这里我觉得有两个点比较值得展开,所以挖点坑
以上就是Vue的响应式原理是什么?的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
更多相关阅读请进入《前端》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者