三、Array 数组侦测
数组 Array 虽然也是属于对象类型，但还是存在一些差别，它没办法像 Object 对象那样，通过 setter/getter 的方式来监听属性的变化，因此对于 Array 而言，需要用到另外一套变化侦测方案。
3.1 如何追踪变化
我们知道，Array 数组有很多个内置方法可以改变数组的值，比如 push,pop,shift等，这些方法都可以改变数组的内容，所以可以尝试通过监听这些方法的调用，来达到监听数组变化的目的。
但是，这些方法都是内置方法，而且 js 中并没有提供接口给我们覆盖，因此要如何修改这些方法，以达到我们需要的效果呢？
答案是，原型方法覆盖。
方法覆盖的方式可以分为2种：自定义同名私有方法，数组对象原型覆盖。
比如说，我们通过给数组对象添加同名的私有方法，就可以覆盖数组的内置方法。
假设数组对象 arr 本身自带有内置方法 push，我们可以通过添加同名私有方法 arr.push 来覆盖它：
1
2
3
4
| arr.push = function (...args) {
Array.prototype.push.apply(arr, args)
}
|
通过利用私有方法调用优先级的方式，就可以实现内置方法的代理。
每当我们调用 push 方法时，效果依旧和原来的一样，只不过实际上调用的是被我们包装代理过后的方法。
除了使用私有方法覆盖的方式以外，还可以通过覆盖数组对象原型 Array.prototype 来实现。
我们都知道，在调用方法时，会优先从当前对象中查找该方法，如果没有，则会继续往上查找对象的原型中有没有该方法，然后这样一直向上，直到找到对应的方法为止，因此我们可以通过覆盖原型对象来实现方法代理。
比如说，数组对象 arr 在调用方法 push 时，会先查找本身有没有这个方法，如果没有，它就会去找原型 Array.prototype 中有没有该方法，这个时候找到了，就可以顺利调用 push 方法了。
假设这个时候，我把 arr 的原型换掉，换成我们自己封装过的，那么在数组对象向上寻找方法时，就会去我们换过的原型中查找方法：
1
2
3
4
5
6
7
8
| var arr = []
arr.__proto__ = {
push: function (...args) {
Array.prototype.push.apply(arr, args);
}
}
|
利用这种原型对象替换的方式，也可以实现内置方法的代理。
3.2 方法拦截器
方法拦截器就是前面介绍的2种代理方式，其实对于这2种代理方式，Vue 中都有相应的实现。
首先，需要代理的方法是能够修改数组对象的方法，包括7个方法：push、pop、shift、unshift、splice、sort、reverse。
其实，我们再构造拦截方法，具体看 Vue 的代码实现：
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
|
const arrayProto = Array.prototype
export const arrayMethods = Object.create(arrayProto)
const methodsToPatch = [
'push',
'pop',
'shift',
'unshift',
'splice',
'sort',
'reverse'
]
methodsToPatch.forEach(function (method) {
const original = arrayProto[method]
Object.defineProperty(arrayMethods, method, {
value: function mutator (...args) {
const result = original.apply(this, args)
return result
},
enumerable: false,
writable: true,
configurable: true
})
})
|
通过这种方法，我们就可以拦截数组对象的方法调用。
然后，将构造好的拦截方法设置到数组对象上：
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
|
const hasProto = '__proto__' in {}
const arrayKeys = Object.getOwnPropertyNames(arrayMethods)
class Observer {
constructor (value) {
this.value = value
if (Array.isArray(value)) {
if (hasProto) {
protoAugment(value, arrayMethods)
} else {
copyAugment(value, arrayMethods, arrayKeys)
}
} else {
this.walk(value)
}
}
}
function protoAugment (target, src) {
target.__proto__ = src
}
function copyAugment (target, src, keys) {
for (let i = 0, l = keys.length; i < l; i++) {
const key = keys[i]
Object.defineProperty(target, key, {
value: src[key],
enumerable: false,
writable: true,
configurable: true
})
}
}
|
为什么需要2种实现方式呢？只用自定义私有方法不就可以实现了吗？
其实是 Vue 优先使用原型替换来实现拦截，但是由于原型属性 __proto__ 在 ES6 之前并不属于官方标准属性，也就是说，通过 __proto__ 访问原型的方式并不是所有浏览器都支持！！！
所以，当浏览器不支持 __proto__ 时，就使用自定义方法拦截的方式实现。
3.3 收集依赖
既然方法拦截已经实现了，那么接下来就应该要实现依赖收集了。
依旧是按3步走：在哪里收集依赖、收集到哪里、什么时候触发依赖。
这个其实和 Objec 对象一样，数组对象的依赖也是在 getter 中收集的。
举个例子：
1
2
3
| var obj = {
arr: [1, 2, 3]
}
|
一般而言，访问数组对象实际上都是通过访问另外一个对象的属性来得到的，例如这里的 obj.arr。
也就是说，在收集 obj.arr 属性的依赖时，可以顺便收集数组的依赖，记住，是顺便收集~~。
因此，Array 数组对象的依赖收集，也是在 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
| function defineReactive (obj, key, val) {
if (typeof val === 'object') {
new Observer(val)
}
let dep = new Dep()
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get: function reactiveGetter () {
dep.depend()
if (Array.isArray(val)) {
}
return val
},
set: function reactiveSetter (newVal) {
if (newVal === val) {
return
}
val = newVal
dep.notify()
}
})
}
|
所以，在收集值为数组对象依赖时，实际上收集了2次依赖，一次是对象属性 obj.arr 的依赖），一次是属性对应的数组值 [1, 2, 3] 的依赖。
综上，Array 数组对象的依赖是在 getter 中收集，而依赖的触发则是在方法拦截器中。
Array 数组对象依赖收集起来的地方，和 Object 对象的稍微有点不同。
原因在于，Object 对象的依赖收集和依赖触发，都是放在同一个作用域内的，也就是 getter/setter 方法，因此依赖只要保存在收集和触发的方法都能访问到的地方即可，在代码中也就是在 defineReactive 方法内。
而 Array 数组对象的话，依赖收集是在 getter 方法中，依赖触发则是在方法拦截器中，需要保证它们俩都能访问到依赖才行。
其实也很简单，只要找到它们的公共父作用域即可，而数组对象本身就可以满足这个条件。
为了能够让收集和触发访问到依赖对象，我们可以将依赖对象保存到数组对象中：
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
| class Observer {
constructor (value) {
this.value = value
this.value.dep = new Dep()
if (Array.isArray(value)) {
if (hasProto) {
protoAugment(value, arrayMethods)
} else {
copyAugment(value, arrayMethods, arrayKeys)
}
} else {
this.walk(value)
}
}
}
function defineReactive (obj, key, val) {
let childOb
if (typeof val === 'object') {
childOb = new Observer(val)
}
let dep = new Dep();
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get: function reactiveGetter () {
dep.depend();
if (childOb && childOb.value.dep) {
childOb.value.dep.depend()
}
return val
},
set: function reactiveSetter (newVal) {
if (newVal === val) {
return
}
val = newVal;
dep.notify();
}
})
}
methodsToPatch.forEach(function (method) {
const original = arrayProto[method]
Object.defineProperty(arrayMethods, method, {
value: function mutator (...args) {
const result = original.apply(this, args)
if (this.dep) {
this.dep.notify()
}
return result
},
enumerable: false,
writable: true,
configurable: true
})
})
|
虽然这种方式也可以使得收集和触发都能访问到 dep 依赖对象，但是感觉不是很优雅，代码中直接在 value 上赋值了 value.dep 属性，这样很容易造成冲突。
所以 Vue 使用了另外一种方式，不是直接在 value 上添加属性 value.dep，而是在 value 上加了一个私有属性 __ob__，表示观察者 Observer。
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
71
| class Observer {
constructor (value) {
this.value = value
this.dep = new Dep()
this.value.__ob__ = this
if (Array.isArray(value)) {
if (hasProto) {
protoAugment(value, arrayMethods)
} else {
copyAugment(value, arrayMethods, arrayKeys)
}
} else {
this.walk(value)
}
}
}
function defineReactive (obj, key, val) {
let childOb
if (typeof val === 'object') {
childOb = new Observer(val)
}
let dep = new Dep();
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get: function reactiveGetter () {
dep.depend();
if (childOb) {
childOb.dep.depend()
}
return val
},
set: function reactiveSetter (newVal) {
if (newVal === val) {
return
}
val = newVal;
dep.notify();
}
})
}
methodsToPatch.forEach(function (method) {
const original = arrayProto[method]
Object.defineProperty(arrayMethods, method, {
value: function mutator (...args) {
const result = original.apply(this, args)
const ob = this.__ob__
if (ob) {
ob.dep.notify()
}
return result
},
enumerable: false,
writable: true,
configurable: true
})
})
|
3.4 存在问题
数组的变化侦测存在的问题，其实很明显。从上面的介绍可知，数组的变化侦测是通过代理数组的原型方法来实现的，所以只要是不经过代理方法调用的，都不会被侦测到。
比如：
1
2
| arr[2] = '0';
arr.length = 0;
|
类似这种直接修改数组的值，就不会被变化侦测检测到。