力有不逮的对象
众所周知，在 Vue 中，直接修改对象属性的值无法触发响应式。当你直接修改了对象属性的值，你会发现，只有数据改了，但是页面内容并没有改变。
这是什么原因？
原因在于： Vue 的响应式系统是基于Object.defineProperty这个方法的，该方法可以监听对象中某个元素的获取或修改，经过了该方法处理的数据，我们称其为响应式数据。但是，该方法有一个很大的缺点，新增属性或者删除属性不会触发监听，举个栗子：
var vm = new Vue({ data () { return { obj: { a: 1 } } } }) // `vm.obj.a` 现在是响应式的 vm.obj.b = 2 // `vm.obj.b` 不是响应式的
原因在于，在 Vue 初始化的时候， Vue 内部会对 data 方法的返回值进行深度响应式处理，使其变为响应式数据，所以， vm.obj.a 是响应式的。但是，之后设置的 vm.obj.b 并没有经过 Vue 初始化时响应式的洗礼，所以，理所应当的不是响应式。
那么，vm.obj.b可以变成响应式吗？当然可以，通过 vm.$set 方法就可以完美地实现要求，在此不再赘述相关原理了，之后应该会写一篇文章讲述 vm.$set 背后的原理。
更凄惨的数组
上面说了这么多，还没有提到本篇文章的主角——数组，现在该主角出场了。
比起对象，数组的境遇更加凄惨一些，看看官方文档：
由于 JavaScript 的限制， Vue 不能检测以下变动的数组：
当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue
当你修改数组的长度时，例如：vm.items.length = newLength
有可能官方文档不是很清晰，那我们继续举个栗子：
var vm = new Vue({ data () { return { items: ['a', 'b', 'c'] } } }) vm.items[1] = 'x' // 不是响应性的 vm.items.length = 2 // 不是响应性的
也就是说，数组连自身元素的修改也无法监听，原因在于， Vue 对 data 方法返回的对象中的元素进行响应式处理时，如果元素是数组时，仅仅对数组本身进行响应式化，而不对数组内部元素进行响应式化。
这也就导致如官方文档所写的后果，无法直接修改数组内部元素来触发响应式。
那么，有没有破解方法呢？
当然有，官方规定了 7 个数组方法，通过这 7 个数组方法，可以很开心地触发数组的响应式，这 7 个数组方法分别是：
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
可以发现，这 7 个数组方法貌似就是原生的那些数组方法，为什么这 7 个数组方法可以触发应式，触发视图更新呢？
你是不是心里想着：数组方法了不起呀，数组方法就可以为所欲为啊？
骚瑞啊，这 7 个数组方法是真的可以为所欲为的。
因为，它们是变异后的数组方法。
数组变异思路
什么是变异数组方法？
变异数组方法即保持数组方法原有功能不变的前提下对其进行功能拓展，在 Vue 中这个所谓的功能拓展就是添加响应式功能。
将普通的数组变为变异数组的方法分为两步：
功能拓展
数组劫持
功能拓展
先来个思考题：
有这样一个需求，要求在不改变原有函数功能以及调用方式的情况下，使得每次调用该函数都能在控制台中打印出'HelloWorld'
其实思路很简单，分为三步：
使用新的变量缓存原函数
重新定义原函数
在新定义的函数中调用原函数
看看具体的代码实现：
function A () { console.log('调用了函数A') } const nativeA = A A = function () { console.log('HelloWorld') nativeA() }
可以看到，通过这种方式，我们就保证了在不改变 A 函数行为的前提下对其进行了功能拓展。
接下来，我们使用这种方法对数组原本方法进行功能拓展：
// 变异方法名称 const methodsToPatch = [ 'push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse' ] const arrayProto = Array.prototype // 继承原有数组的方法 const arrayMethods = Object.create(arrayProto) mutationMethods.forEach(method => { // 缓存原生数组方法 const original = arrayProto[method] arrayMethods[method] = function (...args) { const result = original.apply(this, args) console.log('执行响应式功能') return result } })
从代码中可以看出来，我们调用 arrayMethods 这个对象中的方法有两种情况：
调用功能拓展方法：直接调用 arrayMethods 中的方法
调用原生方法：这种情况下，通过原型链查找定义在数组原型中的原生方法