我们知道通过Object.defineProperty()劫持数组为其设置getter和setter后，调用的数组的push、splice、pop等方法改变数组元素时并不会触发数组的setter，这就会造成使用上述方法改变数组后，页面上并不能及时体现这些变化，也就是数组数据变化不是响应式的（对上述不了解的可以参考这篇文章）。
但实际用vue开发时，对于响应式数组，使用push、splice、pop等方法改变数组时，页面会及时体现这种变化，那么vue中是如何实现的呢？
答案是 vue 重写了数组的push、splice、pop等方法。
// src/core/observer/array.js// 获取数组的原型Array.prototype，上面有我们常用的数组方法const arrayProto = Array.prototype// 创建一个空对象arrayMethods，并将arrayMethods的原型指向Array.prototypeexport const arrayMethods = Object.create(arrayProto)// 列出需要重写的数组方法名const methodsToPatch = ['push','pop','shift','unshift','splice','sort','reverse']// 遍历上述数组方法名，依次将上述重写后的数组方法添加到arrayMethods对象上methodsToPatch.forEach(function (method) {// 保存一份当前的方法名对应的数组原始方法const original = arrayProto[method]// 将重写后的方法定义到arrayMethods对象上，function mutator() {}就是重写后的方法def(arrayMethods, method, function mutator (...args) {// 调用数组原始方法，并传入参数args，并将执行结果赋给resultconst result = original.apply(this, args)// 当数组调用重写后的方法时，this指向该数组，当该数组为响应式时，就可以获取到其__ob__属性const ob = this.__ob__let insertedswitch (method) {case 'push':case 'unshift':inserted = argsbreakcase 'splice':inserted = args.slice(2)break}if (inserted) ob.observeArray(inserted)// 将当前数组的变更通知给其订阅者ob.dep.notify()// 最后返回执行结果resultreturn result})})
