前言
通过前章,我们知道了Vue初始化data的响应式原理,只讲到了对象是如何通过defineReactive
方法对data属性创建监测的,而数组则只是略带过,下边我们就通过源码来捋一下
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) // 对插入的数据再次进行观测
// notify change
ob.dep.notify() // 通知视图更新
return result
})
})
总结
Vue 将 data 中的数组,通过函数劫持的方式,进行了原型链重写;指向了自己定义的数组原型方法,这样当调用数组 api 时,可以通知依赖更新.如果数组中包含着引用类型;会对数组中的引用类型再次进行监控。