Vue.js源码学习 —— 响应系统的设计

如果您是刚开始准备阅读Vue.js的源码,建议先看一下本系列的Vue.js源码学习 —— 起步,相信会对您后面的阅读有很大帮助。

前面一系列的文章主要讲了 Vue 是怎样实现数据渲染和组件化的,也就是如何把原始数据最终映射到DOM中的。但是当数据发生变化时,Vue 是如何自动更新DOM的我们还没看,这也是 Vue 相当重要的一部分,这个特性使得开发者几乎不需要直接操作DOM,只专注在业务逻辑的实现上就可以了。

Vue 实现响应系统的代码位于文件夹core/observer中,这部分的代码完全是独立的,你可以让任何一个普通的 JavaScript 对象变成是响应式的。这一点从项目中对这一模块的测试用例也可以看出来,对应的测试用例位于文件夹test/unit/modules/observer中,在阅读代码遇到困难时,可以看一下测试用例说不定能得到提示。

今天要看的代码位于文件夹core/observer中,主要是ObserverDepWatcher这几个类的实现极其之前的关系。

我没有在文章中大量的粘贴代码,一定要将代码clone下来看哦。

我这一部分还不打算分析propsdata等等数据选项的初始化,好在 Vue 提供了Vue.observable(object)这个全局方法,可以很容易将一个普通对象变成可响应的,所以可以使用这个API举例子来调试,比如:

1
2
3
4
5
let data = {
message: 'Hello World'
}
Vue.observable(data)
console.log(data)

Vue.observable是在文件core/global-api/index.js中加上的,代码如下:

1
2
3
4
5
6
7
export function initGlobalAPI (Vue: GlobalAPI) {
// 2.6 explicit observable API
Vue.observable = <T>(obj: T): T => {
observe(obj)
return obj
}
}

observe函数的实现我们下面会讲到的。

Observer

Observer类中的最上面有这样一段注释:

1
2
3
4
5
6
/**
* Observer class that is attached to each observed
* object. Once attached, the observer converts the target
* object's property keys into getter/setters that
* collect dependencies and dispatch updates.
*/

通过这段注释可知Observer类主要干了两件事:

  • 添加Observer类对象到要被观察的对象中。

  • 将目标对象的属性转换成getter/setter,用来进行依赖收集和派发更新。

先看第1点的实现,在Observer类的构造器函数中会为目标对象添加__ob__属性。我们在之前的代码中也看到过判断__ob__属性是否存在来判断对象是否正在被观察中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
export class Observer {
// ...
constructor (value: any) {
// 目标对象
this.value = value
this.dep = new Dep()
// number of vms that have this object as root $data
this.vmCount = 0
// 为目标对象添加 __ob__ 属性,属性值为当前的 Observer 对象
// __ob__ 是不可以枚举的
def(value, '__ob__', this)
// ...省略
}
}

比如现在有如下对象:

1
2
3
let data = {
message: 'Hello World'
}

在变为可观察的对象后如下:

1
2
3
4
5
6
7
8
let data = {
message: 'Hello World',
'__ob__': {
dep: Dep的实例对象, // new Dep()
value: data, // value 会再指向 data
vmCount: 0
}
}

接下来看第2点的实现,在构造器函数中对应下面这段:

1
2
3
4
5
6
7
8
9
10
if (Array.isArray(value)) {
if (hasProto) { // can we use __proto__?
protoAugment(value, arrayMethods)
} else {
copyAugment(value, arrayMethods, arrayKeys)
}
this.observeArray(value)
} else {
this.walk(value)
}

传入Observer构造器的值必须是对象类型,不能是原始值类型的值。是对象类型时还需要判断是数组对象还是纯对象:

  • 是数组对象时,如果__proto__可用,就将arrayMethods直接赋值给目标对象的__proto__。否则将arrayMethods中的每一项添加到目标对象本身。然后调用observeArray方法将数组中的每一项都转换成可观察的对象。

    举个例子来看一下添加arrayMethods后对象的样子,比如现在有如下对象:

    1
    2
    3
    4
    5
    6
    7
    let data = {
    items: [
    { name: 'alma', type: 'cat', id: 'A' },
    { name: 'ring', type: 'cat', id: 'B' },
    { name: 'winston', type: 'dog', id: 'C' }
    ]
    }

    使用protoAugment函数添加arrayMethods后如下:

    使用copyAugment函数添加arrayMethods后如下:

    可以看到这些数组的方法都是会改变数组自身的内容,每个方法重新被写成了mutator()方法。这样在数组的内容改变时就会被拦截到,然后发出通知。实现的过程在文件observer/array.js中:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    /**
    * Intercept mutating methods and emit events
    */
    methodsToPatch.forEach(function (method) {
    // cache original method
    const original = arrayProto[method]
    def(arrayMethods, method, function mutator (...args) {
    const result = original.apply(this, args)
    const ob = this.__ob__
    // ...
    // notify change
    ob.dep.notify()
    return result
    }
    }
  • 是纯对象时,调用walk方法将所有对象的属性转换成getter/setter

observer工厂函数

observeArray方法中可以看到没有用new Observer(items[i])来直接创建可观察的对象,而是使用了observer工厂函数来创建。在observer中会先判断value是否需要被观察,从下面这段代码可知不是对象类型的值,或者是VNode的实例,是不需要观察的。

1
2
3
if (!isObject(value) || value instanceof VNode) {
return
}

如果是需要观察的值,并且已经在观察中了,则直接将value.__ob__赋值给最后要返回的ob变量。

1
2
3
4
5
let ob: Observer | void
// value 需要有 __ob__ 属性,并且 value.__ob__ 的值是 Observer 的实例
if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) {
ob = value.__ob__
}

如果值还没有在观察中,需要满足下面这些条件才可以创建Observer的实例:

1
2
3
4
5
6
7
8
9
else if (
shouldObserve &&
!isServerRendering() &&
(Array.isArray(value) || isPlainObject(value)) &&
Object.isExtensible(value) &&
!value._isVue
) {
ob = new Observer(value)
}
  • shouldObservetrue时,shouldObserve的定义如下。这使得在不需要观察对象的变化时可以将该功能关掉。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    /**
    * In some cases we may want to disable observation inside a component's
    * update computation.
    */
    export let shouldObserve: boolean = true

    export function toggleObserving (value: boolean) {
    shouldObserve = value
    }
  • 正在进行的不是服务器端渲染。

  • 值的类型是数组或者是纯对象。

  • 对象是可扩展的。在 MDN 中对对象的可扩展性解释如下:

    默认情况下,对象是可扩展的:即可以为他们添加新的属性。以及它们的 __proto__ 属性可以被更改。Object.preventExtensionsObject.sealObject.freeze 方法都可以标记一个对象为不可扩展(non-extensible)。

  • 当前的值不是Vue实例对象。

最后判断如果asRootDatatrue,将ob.vmCount的值加1。

1
2
3
if (asRootData && ob) {
ob.vmCount++
}

搜索整个工程可以发现,只在将创建Vue实例时传的data选项转换成可观察的对象时,才会将asRootData设置为true

1
2
3
4
5
function initData (vm: Component) {
// ...
// observe data
observe(data, true /* asRootData */)
}

vmCount主要会在 Vue 公开给开发者使用的Vue.setVue.delete中会使用到,我们看到那部分代码时再说。

整个observer函数中做的事情就这些了,可以说整个项目中都是使用observer这个工厂函数来获得Observer的实例对象的,这样就将创建Observer的实例对象之前需要做的一些判断集中在了一处。

defineReactive

walk方法中主要是使用defineReactive函数来将对象的每一个属性转换成gettersetter的,在getter中收集依赖,在setter中派发更新。这里涉及到了Dep这个类,我们稍后再看它的代码,所以先将涉及到Dep的地方忽略掉,主要看它的转化过程。

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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
/**
* Define a reactive property on an Object.
*/
export function defineReactive(
obj: Object, // 属性所在的对象
key: string, // 属性名
val: any, // 属性值,也可以不传
customSetter?: ?Function, // 给调用方在setter被触发后执行某些任务的机会
shallow?: boolean // 是否深度观察
) {
// 如果属性是不可配置的,不需要观察,直接返回
const property = Object.getOwnPropertyDescriptor(obj, key)
if (property && property.configurable === false) {
return
}

// cater for pre-defined getter/setters
const getter = property && property.get
const setter = property && property.set
if ((!getter || setter) && arguments.length === 2) {
// 之前没有 getter 或者 有 setter时,并且只传了两个参数,obj & key
// 取 key 对应的值
val = obj[key]
}

// 需要深度观察时,对 val 再进行转换
// 如果 newVal 不是对象类型的 或者不能被观察,observe的返回会是 undefined
let childOb = !shallow && observe(val)

// 定义属性的 getter & setter
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get: function reactiveGetter() {
// 如果之前有 getter,调用之前的 getter获取值,
// 否则使用刚刚获得的 val 作为 getter 返回值
const value = getter ? getter.call(obj) : val
// ...
return value
},
set: function reactiveSetter(newVal) {
const value = getter ? getter.call(obj) : val
/* eslint-disable no-self-compare */
// 1. 新旧值完全一样直接返回
// 2. 自身不等于自身的值,其实是 NaN,这时也直接返回
if (newVal === value || (newVal !== newVal && value !== value)) {
return
}
/* eslint-enable no-self-compare */
// 如果调用方传了 customSetter,就执行它
if (process.env.NODE_ENV !== 'production' && customSetter) {
customSetter()
}
// #7981: for accessor properties without setter
// 只读的属性,直接返回
if (getter && !setter) return
// 如果之前在属性描述符中定义了 setter,则用之前的setter设置新值
// 否则直接设置新值
if (setter) {
setter.call(obj, newVal)
} else {
val = newVal
}
// 需要深度观察时,对新值再进行转换
// 如果 newVal 不是对象类型的 或者不能被观察,observe的返回会是 undefined
childOb = !shallow && observe(newVal)
// ...
}
})
}

说一下shallow这个参数,大多数情况下都是没有传的,那么!shallow的值就会是true,是需要深度观察的。搜索整个工程会发现这个参数主要用于将Vue实例属性$attrs$listeners转换成可观察的对象时,显示地调用了defineReactive函数。

来看一下一个对象经过转换后的样子:

Vue.set/Vue.delete

在文件core/global-api/index.js中添加了Vue的全局方法setdelete

1
2
3
4
5
6
7
import { set, del } from '../observer/index'
export function initGlobalAPI (Vue: GlobalAPI) {
//...
Vue.set = set
Vue.delete = del
//...
}

可以看到用到的就是下面两个函数:

1
2
3
4
5
6
7
export function set(target: Array<any> | Object, key: any, val: any): any {
// ...
}

export function del(target: Array<any> | Object, key: any) {
// ...
}

两个函数的处理流程几乎是一样的:

  • 如果目标对象是undefinednull或原始值类型是不能添加或删除响应式属性的。

  • 如果目标对象是数组,我们上面有说到改变数组自身内容的方法被调用时,都会被拦截到,然后发出通知。这些方法就包括了splice,所以这里调用了splice来像数组中添加或移除项。

  • set时,如果key已经是目标对象的属性,那么该属性已经是响应式的了,可以直接赋值,这是属性描述符中的setter会被触发。

  • del时,如果key不在目标对象中,直接返回。

  • 如果目标对象是 Vue 实例对象,或 Vue 实例的根数据对象时,不能添加也不能删除响应式属性。

  • 获取目标对象的__ob__属性值,并赋值给变量ob

  • set时,如果ob为空,则直接给属性赋值后返回。否则调用defineReactive函数将属性转换为响应式的,并发出通知。

  • del时,从目标对象中删除指定的属性。如果ob为空直接返回,否则发出通知。

看过这setdel的实现后,可以再回头来理解一遍官方文档中检测变化的注意事项一节的说明了。

Dep

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
let uid = 0

/**
* A dep is an observable that can have multiple
* directives subscribing to it.
*/
export default class Dep {
static target: ?Watcher;
id: number;
subs: Array<Watcher>; // Dep 所有的订阅者

constructor () {
this.id = uid++ // 每创建一个Dep实例,uid就会加1
this.subs = []
}

// ...
}

从这里可以看到一个Dep实例可以有多个订阅者,从类型注解上可以看出订阅者就是Watcher,并且有一个唯一id。此外Dep类还有一个静态属性target,这个target就是当前的观察者,一个时间段只会有一个观察者,我们可以看下面这段代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// The current target watcher being evaluated.
// This is globally unique because only one watcher
// can be evaluated at a time.
Dep.target = null
const targetStack = []

export function pushTarget (target: ?Watcher) {
targetStack.push(target)
Dep.target = target
}

export function popTarget () {
targetStack.pop()
Dep.target = targetStack[targetStack.length - 1]
}

pushTarget(target)popTarget()这段时间内的观察者就是target,如果在某个时间段内不想被观察者观察就可以不传target了,比如在调用Vue实例的生命周期钩子时:

1
2
3
4
5
6
export function callHook (vm: Component, hook: string) {
// #7573 disable dep collection when invoking lifecycle hooks
pushTarget()
// ...
popTarget()
}

栈这种数据结构在这被应用的真是极好了。

我们现在再回头来看一下属性的gettersetter中与Dep有关的代码:

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
export function defineReactive(
obj: Object,
key: string,
val: any,
customSetter?: ?Function,
shallow?: boolean
) {
const dep = new Dep()
// ...
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get: function reactiveGetter() {
//...
if (Dep.target) {
dep.depend()
if (childOb) {
childOb.dep.depend()
if (Array.isArray(value)) {
dependArray(value)
}
}
}
return value
},
set: function reactiveSetter(newVal) {
// ...
dep.notify()
}
}

/**
* Collect dependencies on array elements when the array is touched, since
* we cannot intercept array element access like property getters.
*/
function dependArray(value: Array<any>) {
for (let e, i = 0, l = value.length; i < l; i++) {
e = value[i]
e && e.__ob__ && e.__ob__.dep.depend()
if (Array.isArray(e)) {
dependArray(e)
}
}
}

可以看到一个属性对应的一个Dep实例。我们说 依赖收集 指的就是给当前的观察者(Watcher实例)收集要被观察的对象(Dep实例),在getter中主要使用的是dep.depend()进行依赖收集,如果getter要返回的值是数组,会在深度观察时dependArray递归对数组中的每一项元素的dep进行收集。在setter中主要使用的是dep.notify()来派发更新。下面我们就来看一下依赖收集和派发更新的过程。

依赖收集的过程

depend方法的代码如下:

1
2
3
4
5
6
7
8
9
export default class Dep {
// ...
depend () {
if (Dep.target) {
Dep.target.addDep(this)
}
}
// ...
}

可以看到depend只是对target.addDep的包装,从前面可知target就是Watcher的实例对象,所以到watcher.js中看一下这个方法的实现:

1
2
3
4
5
6
7
8
9
10
11
12
13
/**
* Add a dependency to this directive.
*/
addDep (dep: Dep) {
const id = dep.id
if (!this.newDepIds.has(id)) {
this.newDepIds.add(id)
this.newDeps.push(dep)
if (!this.depIds.has(id)) {
dep.addSub(this)
}
}
}

addSub的实现如下:

1
2
3
4
5
6
7
export default class Dep {
// ...
addSub (sub: Watcher) {
this.subs.push(sub)
}
// ...
}

所以addDep方法进行了一个双向的添加:给当前的观察者添加一个依赖,并且给该依赖添加一个观察者。
newDepIds中放的是本次在观察期间收集的依赖iddepIds中放的是上一次观察期间收集的依赖。在一次的观察期间,一个属性的getter方法可能会被调用很多次,也就是与这个属性对应的依赖可能被多次收集,所以需要使用!this.newDepIds.has(id)来判断避免重复收集。在本次观察期间的观察者也有可能在上一次观察期间已经添加到依赖的订阅者中了,所以需要使用(!this.depIds.has(id)来判断避免给依赖添加重复的观察者。

为什么说newDepIds中放的是本次在观察期间收集的依赖id呢?看Watcher类中的get方法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
export default class Watcher {
/**
* Evaluate the getter, and re-collect dependencies.
*/
get () {
pushTarget(this)
let value
const vm = this.vm
try {
value = this.getter.call(vm, vm)
} catch (e) {
// ...
} finally {
popTarget()
this.cleanupDeps()
}
return value
}
}

前面说了在pushTargetpopTarget之间是一次观察期,这里的观察者就是当前的watcher实例对象。在this.getter执行的过程中,因为这里会发生组件的渲染,所以数据对象的属性的getter就会被调用了,进而dep.depend()会被调用,那么不在newDeps中的依赖就会被放入进去。

我会但开一篇文章来总结组件的更新过程,到时就会看到为什么在this.getter执行的过程中会发生组件的渲染。

在观察期结束后,调用cleanupDeps移除所有当前观察者的所有依赖。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
export default class Watcher {
/**
* Clean up for dependency collection.
*/
cleanupDeps () {
let i = this.deps.length
while (i--) {
const dep = this.deps[i]
if (!this.newDepIds.has(dep.id)) {
dep.removeSub(this)
}
}
let tmp = this.depIds
this.depIds = this.newDepIds
this.newDepIds = tmp
this.newDepIds.clear()
tmp = this.deps
this.deps = this.newDeps
this.newDeps = tmp
this.newDeps.length = 0
}
}

cleanupDeps方法中先将遍历当前观察者的所有依赖,如果依赖没有在本次观察期被收集,就将当前观察者从依赖的所有订阅者中移除。然后把本次收集的依赖赋值给deps,最后清空newDeps

派发更新的过程

notify方法的实现如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
export default class Dep {
notify () {
// stabilize the subscriber list first
const subs = this.subs.slice()
if (process.env.NODE_ENV !== 'production' && !config.async) {
// subs aren't sorted in scheduler if not running async
// we need to sort them now to make sure they fire in correct
// order
subs.sort((a, b) => a.id - b.id)
}
for (let i = 0, l = subs.length; i < l; i++) {
subs[i].update()
}
}
}

对于订阅者Watcher的实例也有唯一id,先创建的实例id较小,在同步执行更新时会按id先给订阅者排个序,确保先添加的订阅者先被通知更新。接着调用了订阅者的update方法。update方法在接下来的Watcher部分再细说。

Watcher

下面是对Watcher类的注释:

1
2
3
4
5
/**
* A watcher parses an expression, collects dependencies,
* and fires callback when the expression value changes.
* This is used for both the $watch() api and directives.
*/

Watcher类主要负责解析表达式,收集依赖,当表达式的值改变时触发回调。可以看到这个类也会被用于实现$watchAPI。搜索整个工程可以发现3处有new Watcher()这个动作:

  • mountComponent函数中,这个在讲Vue.js源码学习 —— Vue实例挂载的实现时有遇到过。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    updateComponent = () => {
    vm._update(vm._render(), hydrating)
    }
    new Watcher(vm, updateComponent, noop, {
    before () {
    if (vm._isMounted && !vm._isDestroyed) {
    callHook(vm, 'beforeUpdate')
    }
    }
    }, true /* isRenderWatcher */)
  • initComputed函数中,位于文件core/instance/state.js中。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    const computedWatcherOptions = { lazy: true }

    function initComputed (vm: Component, computed: Object) {
    // ...
    if (!isSSR) {
    // create internal watcher for the computed property.
    watchers[key] = new Watcher(
    vm,
    getter || noop,
    noop,
    computedWatcherOptions
    )
    }
    // ...
    }
  • Vue.prototype.$watch方法中。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    Vue.prototype.$watch = function (
    expOrFn: string | Function,
    cb: any,
    options?: Object
    ): Function {
    // ...
    options = options || {}
    options.user = true
    const watcher = new Watcher(vm, expOrFn, cb, options)
    // ...
    }

将各种使用场景列出来,会更加便于我们理解Watcher的构造器函数的参数。

Watcher的构造器函数

1
2
3
4
5
6
7
8
9
10
11
12
export default class Watcher {
constructor (
vm: Component,
expOrFn: string | Function,
cb: Function,
options?: ?Object,
isRenderWatcher?: boolean
) {

// ...
}
}
  • vmVue的实例对象,会像该vm的观察者列表中添加当前这个观察者。

    1
    vm._watchers.push(this)
  • expOrFn:表达式,在一个watcher收到通知后,会执行该表达式获得新的值。表达式可以是字符串,也可以是一个函数。我们看到在mountComponent函数中创建Watcher实例时传的就是函数,而传字符串的情况比如使用vm.$watch时:

    1
    2
    3
    4
    5
    // 'message' 即是表达式
    vm.$watch('message', function (newVal, oldVal) {
    // ...
    })
    vm.message = 'Hi Vue'

    在构造器函数的下面有这样一段代码:

    1
    2
    3
    4
    5
    6
    // parse expression for getter
    if (typeof expOrFn === 'function') {
    this.getter = expOrFn
    } else {
    this.getter = parsePath(expOrFn)
    }

    expOrFn是字符串时会调用parsePath函数进行解析。表达式只支持用 符号取值。经过parsePath函数解析后会返回下面这个函数:

    1
    2
    3
    4
    5
    6
    7
    ƒ (obj) {
    for (var i = 0; i < segments.length; i++) {
    if (!obj) { return }
    obj = obj[segments[i]];
    }
    return obj
    }

    表达式最终会赋值给this.getter,调用this.getter时就是在计算表达式的值。

  • cb:表达式执行完,调用cb将结果告知使用方,比如上面vm.$watch中的第2个参数。

  • optionsWatcher实例的选项,可以用来对该实例进行一些配置。从构造函数下面这段代码可知有哪些选项可配置:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    // options
    if (options) {
    // 监听对象内部值的变化
    this.deep = !!options.deep
    // 是内部创建的还是外部创建的,上面看到在 Vue.prototype.$watch 的实现中,设置了该选项为true
    this.user = !!options.user
    // 上面看到在 initComputed 函数中设置了该选项为true
    this.lazy = !!options.lazy
    // 是否同步执行更新,默认情况是false
    this.sync = !!options.sync
    // 可以看成是 Watcher 的钩子,在执行更新之前让调用方做一些事情
    // 从上面看到在 mountComponent 函数中,在 before 中触发了 Vue 实例生命周期中的 beforeUpdate 钩子
    this.before = options.before
    } else {
    // 没有传 options,各项默认都是 false
    this.deep = this.user = this.lazy = this.sync = false
    }
  • isRenderWatcher:用于标识当前的Watcher实例是否是渲染函数的观察者。一个组件实例会有一个渲染函数观察者,所以当isRenderWatchertrue时,将当前Watcher实例赋值给了vm._watcher。在上面mountComponent函数中,我们也看到了这个参数传了true

    1
    2
    3
    if (isRenderWatcher) {
    vm._watcher = this
    }

最后构造器函数中是下面这段代码:

1
2
3
this.value = this.lazy
? undefined
: this.get()

如果当前实例不是计算属性的观察者,会立即计算表达式当前的值,并赋值给this.value。在这里调用get方法还会起到一个作用,就是去收集相关属性的依赖,因为在执行表达式期间会触发属性的getter执行。

这就是Watcher构造器函数中做的事情了,接下来我们再看一下Watcher类中的其他方法的实现。

get

先看get方法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
get () {
// 以当前实例为观察者开始进行观察
pushTarget(this)
let value
const vm = this.vm
try {
// 计算表达式的值,给表达式绑定了 vm,同时传的参数也是 vm
value = this.getter.call(vm, vm)
} catch (e) {
// ...
} finally {
// "touch" every property so they are all tracked as
// dependencies for deep watching
if (this.deep) {
traverse(value)
}
// 以当前实例为观察者的观察结束
popTarget()
this.cleanupDeps()
}
return value
}

如果deep的值是true,说明需要深度观察,然后将value传给traverse函数。在traverse函数内部会递归获取嵌套对象的属性值,这样就会触发属性描述符中的getter被执行,从而进行依赖收集。

在观察结束后,调用cleanupDeps方法移除当前观察者的所有依赖,cleanupDeps方法已经在前面分析过了。

run

再来看看run方法,真正执行更新的地方,我抽出了主流程如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
run () {
if (this.active) {
const value = this.get()
if (
value !== this.value ||
isObject(value) ||
this.deep
) {
// set new value
const oldValue = this.value
this.value = value
this.cb.call(this.vm, value, oldValue)
}
}
}

首先判断当前观察者是否处于活跃状态,只有活跃状态时才需要计算表达式的值。然后调用get方法拿到了表达式最新的值,在以下条件满足其一时会更新之前的值,再将新旧值作为参数传给回调函数。

  • 新值和旧值完全不等。
  • 新值是对象类型,因为对象的引用虽然没变,但是嵌套的属性值可能已经变了。
  • 需要什么观察时。

update

再来看之前提到的update方法,这个方法是提供给别人来触发更新的接口。

1
2
3
4
5
6
7
8
9
10
11
update () {
/* istanbul ignore else */
if (this.lazy) {
// 计算属性使用
this.dirty = true
} else if (this.sync) {
this.run()
} else {
queueWatcher(this)
}
}

这里分了3中情况处理:

  • 如果当前观察者的lazy选项是true,说明是计算属性的观察者。此时只是设置了dirtytrue。为什么这样做,我们说到计算属性的初始化时再看。

  • 如果是同步更新的话,会立马执行run来计算表达式的值。这个只有在options参数中明确给出synctrue才会走到这里,默认情况都是用的异步更新。

    1
    2
    3
    4
    5
    6
    7
    vm.$watch('message', function (newVal, oldVal) {
    console.log(newVal)
    console.log(oldVal)
    }, {
    sync: true // 手动指定 sync 为 true
    })
    vm.message = 'Hi Vue'
  • 其他情况都会先将当前观察者先放入异步更新队列中,等待执行。queueWatcher函数的实现,以及异步更新队列相关的内容会在下一篇文章中讲。

teardown

我们在讲Vue.prototype.$destroy的实现时,有这样一段代码:

1
2
3
4
5
6
7
8
9
10
11
12
Vue.prototype.$destroy = function () {
// ...
// teardown watchers
if (vm._watcher) {
vm._watcher.teardown()
}
let i = vm._watchers.length
while (i--) {
vm._watchers[i].teardown()
}
// ...
}

也就是在销毁Vue实例对象过程中,其中一部就是拆除所有对Vue实例对象的观察者。teardown方法的实现如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/**
* Remove self from all dependencies' subscriber list.
*/
teardown () {
if (this.active) {
// remove self from vm's watcher list
// this is a somewhat expensive operation so we skip it
// if the vm is being destroyed.
if (!this.vm._isBeingDestroyed) {
remove(this.vm._watchers, this)
}
let i = this.deps.length
while (i--) {
this.deps[i].removeSub(this)
}
this.active = false
}
}

首先还是确保在当前观察者是活跃的状态时进行移除操作,最后将其设置为非活跃状态。移除分两步:

  • 如果Vue实例对象没有正在进行销毁,将当前观察者从Vue实例对象的观察者列表中移除掉。因为这里涉及到在数组中进行查找,所以会有额外性能消耗。那如果Vue实例已经准备要销毁了,不移除当前观察者也不会有什么影响。

  • 我们知道当前的观察者会有多个依赖(Dep实例),这里每个依赖的订阅列表中也会有当前的观察者,所以它们之间的关系也要解除。

Watcher类中还剩下evaluatedepend方法没说,这两个方法都是用于计算属性的观察者时,等我们将计算属性的相关内容时再来看。

到此ObserverDepWatcher这几个Vue响应系统中很重要的类的代码差不多就全看完了,我们不仅了解了它们之间的关系,更是了解了Vue的响应系统是如何做到在数据改变时能够自动做出反应的,而不需开发者的参与。我把上面讲的内容画了一张图来总结,如下:

下一篇文章会讲组件的更新过程,这其中就包括了异步更新队列的实现,nextTick的实现等。

本文作者:意林
本文链接:http://shinancao.cn/2020/02/01/Vue-Source-Code-08/
版权声明:本博客所有文章除特别声明外,均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处!