持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第6天，点击查看活动详情
前言
大家好，在前面mvvm原理的分享中，我们知道在vue2中所有对象的属性之所以是响应式属性，是因为vue利用Object.defineProperty对这些对象的属性进行了数据劫持，然后又利用发布订阅模式对数据进行依赖收集和通知，从而实现了数据响应式。那么这里只是针对对象的。那么数组又是如何实现响应式的呢，下面我们来分析一下。
数组响应式原理
我们都知道在vue2中我们不能直接通过操作数组的索引来控制数组的增删改操作（不是响应式），而要修改数组必须要通过数组的7个方法或者通过vue实例的$set方法来实现。关于实例的set方法前面有专门的文章介绍，这里就不多说。那么为什么通过vue的7个方法就可用实现数组的响应式 ，而通过索引操作就不行呢，下面我们来看看其实现源码。
// src/core/observer/array.ts
/*
* not type checking this file because flow doesn't play well with
* dynamically accessing methods on Array prototype
*/
import { def } from '../util/index'
const arrayProto = Array.prototype
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)
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
})
})
源码分析
从上面的源码中不难发现，关于数组响应式的代码加上注释也就四十来行，所以整体来说还是比较简单的。下面我们来简单分析一下，总结起来其实就是一句话：
对数组的7个可改变自身的原型方法的增强变异，然后拦截对这些方法的操作
- 首先拿到数组的原型对象prototype并保存在变量arrayProto中
- 然后创建一个arrayMethods，并让该对象的__proto__指向arrayProto（也就是数组的原型）
- 定义一个数组methodsToPatch，数组里保存的值就是数组的可改变自身的7个方法对应的字符串
- 接着遍历数组methodsToPatch，根据数组中的值到数组的原型对象中找到对应的方法并保存在original中
- 通过def函数给对象arrayMethods添加数组中的那7个方法作为该对象的属性，并对它们进行数据劫持。其中def方法中调用的是Object.defineProterty从而实现对arrayMethods中的属性进行劫持
- def的第三个参数mutator是一个函数，并作为Object.defineProterty的val参数，在该函数中：
-
首先通过original.apply调用了数组原型中原生的7个方法（如push等）
-
然后判断如果调用的是push／shift/splice则说明数组中新增了内容，并通过observe中的observeArray方法对这些新增的元素继续做响应式处理
-
最后通过dep中的notify方法进行更新通知，并将此次操作的结果result返回
-
总结
以上就是对vue2中数组响应式原理的简单分析梳理，其本质就是对数组中7个可改变自身的方法进行增强变异，然后也是通过Object.defineProperty进行数据劫持从而实现了数组的响应式。好了今天的分享就到这里了。
