前言
上一篇文章 深入响应式原理Vue.set 我们学习了 Vue.set 的实现原理，在此基础上我们再来学习下 vue 中数组变异方法
为什么无法监听数组
我们知道 vue 是利用 Object.defineProperty 来实现监听的，为什么说无法监听数组呢？是因为 Object.defineProperty 的原因么
其实 Object.defineProperty 是可以监听数组元素的
const arr = [] Object.defineProperty(arr, 0, { get (a) { console.log('arr[0] get') return 0 }, set (a) { console.log('arr[0] set') console.log(a) } }); arr[0] // arr[0] get arr[0] = 1 // arr[0] set 复制代码
那为啥说无法监听数组呢？其实是因为以下几点
- 我们虽然可以监听
arr[0] = 1这种赋值，但是无法监听方法arr.push(1)这样的赋值方式 - 因为数组的长度是不固定的，假如当前数组长度为
1，我们设置arr[1] = 2添加了元素，因为没有监听索引1，所以说无法监听后期添加的元素 - 最主要的障碍在于无法监听数组长度，
Object.defineProperty(deep, 'length')是不行的，所以通过监听length来为添加的索引进行监听这条路行不通
所以虽然 Object.defineProperty 可以监听数组元素，但是因为数组的灵活性带来的一系列问题不好解决，Vue 也就没去通过劫持数组元素的方式来实现响应式。（PS：以后谁再说数组是无法劫持的，要不要跳起来打他）
vue是如何处理数组的
export class Observer { value: any; dep: Dep; vmCount: number; // number of vms that have this object as root $data constructor (value: any) { this.value = value this.dep = new Dep() this.vmCount = 0 // 为value添加__ob__指向实例 def(value, '__ob__', this) // 如果是数组则执行以下 if (Array.isArray(value)) { // 为数组添加变异方法 if (hasProto) { protoAugment(value, arrayMethods) } else { copyAugment(value, arrayMethods, arrayKeys) } // 实际将遍历数组执行 new Observer() this.observeArray(value) } else { this.walk(value) } } // ... } 复制代码
可以看出的是，对于对象是会执行 walk 函数遍历属性执行 defineReactive 来为属性建立监听的。而对于数组并不会执行 walk 进行索引监听。但是会执行 observeArray 遍历数组元素递归元素值的监听。
所以有这样一个结论，vue 监听了对象属性，但是对于数组是直接跳过的，不会进行索引监听。
数组变异方法
我们接着再来看 vue 中的数组变异方法是如何实现的。在上面的代码有这样一段
if (hasProto) { protoAugment(value, arrayMethods) } else { copyAugment(value, arrayMethods, arrayKeys) } 复制代码
这里的 protoAugment 和 copyAugment 其实都比较简单，就是为数组添加方法 arrayMethods
protoAugment 和 copyAugment
function protoAugment (target, src: Object) { target.__proto__ = src } function copyAugment (target: Object, src: Object, keys: Array<string>) { for (let i = 0, l = keys.length; i < l; i++) { const key = keys[i] def(target, key, src[key]) } } 复制代码
arrayMethods
arrayMethods 的实现在 src/core/observer/array.js 中，其内容是我们今天学习的重点
import { def } from '../util/index' // 用数组原型对象创建新对象并返回 const arrayProto = Array.prototype export const arrayMethods = Object.create(arrayProto) // 数组方法数组哈哈 const methodsToPatch = [ 'push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse' ] 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__ let inserted // 只有push unshift splice 会插入新值 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() 其实和 Vue.set 响应的原理是一样的 ob.dep.notify() return result }) }) 复制代码
源码很好理解，从 Array.prototype 中继承了数组方法，再对数组方法进行重写，在新方法中实际调用原型方法并添加额外功能。这也就是变异方法 push, pop, shift, unshift, splice, sort, reverse 的实现原理及其能够通知变化的原因了。
最佳实践
今天的源码比较简单，但我们可以从中学习到一些实践（PS:基于本人理解）
不污染全局
const arrayProto = Array.prototype export const arrayMethods = Object.create(arrayProto) 复制代码
从 Array 的原型中继承方法，而不是通过重写 Array.prototype 来实现功能，这样很好地实现需求又不污染全局
总结
本篇分析了 vue 的数组变异方法的实现，比较简单，大家通过源码自己都能看明白。希望大家 good good staduy day day up
