前言
通过前章，我们知道了Vue初始化data的响应式原理，只分享到了对象是如何通过defineReactive 方法对data属性创建监测的，而数组则只是略带过，下边我们就通过源码来捋一下
没有看到前章Vue响应式原理的，没事儿，来，走一波儿小礼物 撸起 Go Vue Object defineProperty
Observer 数组部分
首先看回这个 Observer 类构造函数 src/core/observer/index.js
// 我们看回这段代码
if (Array.isArray(value)) { // 是数组
if (hasProto) {
protoAugment(value, arrayMethods) // 改写数组原型方法
} else {
copyAugment(value, arrayMethods, arrayKeys) // 复制数组已有方法
}
this.observeArray(value) // 深度观察数组中的每一项
} else {
this.walk(value) //是对象则重新定义对象类型数据 （前章讲过）
}
}
protoAugment
protoAugment 方法 改写数组原型方法，把原型改写指向 arrayMethods
function protoAugment (target, src: Object) {
target.__proto__ = src
}
observeArray
observeArray 方法 主要是遍历数组，然后调用 observer 判断是否已经被监听，没被监听则 new Observer 类 创建监听 ，前边有讲过
// 是数组则遍历数组，走进observer方法查看是否被监听
observeArray (items: Array<any>) {
for (let i = 0, l = items.length; i < l; i++) {
observe(items[i]) // 观测数组中的每一项
}
}
实现数组监听核心
整个js文件内容不多，主要做了几件事 src/core/observer/array.js
- 创建数组原型，赋值给
arrayMethods - 重写数组原型方法给
arrayMethods并修改 this - 对数组改变的数据进行观测，递归遍历，方法实体往上看10行
observeArray - 通知 wachter 更新视图
import { def } from '../util/index'
const arrayProto = Array.prototype
// 创建一个数组原型赋值给 arrayMethods , 原型继承
export const arrayMethods = Object.create(arrayProto)
const methodsToPatch = [ // 数组常用修改方法
'push',
'pop',
'shift',
'unshift',
'splice',
'sort',
'reverse'
]
/**
* 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) // 修改this
const ob = this.__ob__
let inserted
switch (method) {
case 'push':
case 'unshift':
inserted = args
break
case 'splice':
inserted = args.slice(2)
break
}
// 对数据新插入的数据再次进行观测
if (inserted) ob.observeArray(inserted)
// 通知视图更新
ob.dep.notify()
return result
})
})
总结
Vue 将 data 中的数组，通过函数劫持的方式，进行了原型链重写；指向了自己定义的数组原型方法，这样当调用数组 api 时，可以通知依赖更新.如果数组中包含着引用类型；会对数组中的引用类型再次进行监测。
