提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档

Vue如何监听数组的变化？

理解:
使用函数劫持的方式，重写了数组的方法 Vue 将 data 中的数组，进行了原型链重写。指向了自己定义的数组原型方法，这样当调用数组 api 时，可以通知依赖更新.如果数组中包含着引用类型。会对数组中的引用类型再次进行监控

重写了数组中的原型的方法

1.获取数组中的原型方法,因为拦截后还需要这些原生的方法帮助我们实现数组的变化
2.对这些原型的方法使用object.deinePropetry进行拦截操作(def方法)
3.把拦截的数组的原型指向改造后的原型

原理:

Vue为什么不能检测数组变动

性能问题而没有采用这种方式监听数组。
性能代价和获得的用户收益不成正比

通过源码我们可以知道，Vue 没有对数组每个键设置响应式的过程，而是直接对值进行递归设置响应式。

$set为啥能检测数组变动

这就是vue重写数组方法的原因，利用数组这些方法触发使得每一项的value都是响应式的

修改了数组对象的原型，在原本的原型链上插入了一个新的原型对象，在新的原型对象上重写了7个变异方法（push/pop/unshift/shift/splice/sort/reverse）

var arrayProto = Array.prototype
var newArrayProto = Object.create(arrayProto)
newArrayProto.push = function (...rest) {
    // 监听到调用了数组的push方法，执行视图渲染的代码
    console.log('监听到调用了数组的push方法，执行视图渲染的代码，添加之前的逻辑。。。。')

    // 为了保留原来的数组push方法的逻辑
    arrayProto.push.call(this, ...rest)

    console.log('数组push方法添加之后的逻辑，。。。。。')
}
// 在递归遍历数据的时候，只要找到数组数据，就将其原型指向为newArrayProto
// arr.__proto__ = newArrayProto
var arr = [1,2,3]
arr.__proto__ = newArrayProto

为什么没有像对象一样用Object.defineProperty监听数组中所有的元素变化呢？

因为数组中的元素有可能有很多个，如果循环遍历，开销太大！不能这样。。。Vue给我们提供了支持驱动视图的API（this.$set,
Vue.set），还有重写了7个变异方法

Vue.js观察数组变化主要通过以下7个方法（push、pop、shift、unshift、splice、sort、reverse）

怎么实现?

通过对data数据中数组的这7个方法进行重新包装（注意只是data数据中的数组）

为什么不直接对Array.prototype的原型方法进行重新包装?

因为不应该过多地去影响全局

案例：

const patchArray = (function () {
    const methodsToPatch = [
        'push',
        'pop',
        'shift',
        'unshift',
        'splice',
        'reverse',
        'sort'
    ];

//设置对象属性的工具方法
    function def (obj, key, val) {
        Object.defineProperty(obj, key, {
            value: val,
            enumerable: true,
            writable: true,
            configurable: true
        });
    }

    const arrayProto = Array.prototype, //缓存Array的原型
        arrayMethods = Object.create(arrayProto); //继承Array的原型

    methodsToPatch.forEach(function (method, index) {
        def(arrayMethods, method, function (...args) {
            //首先调用Array原型的方法
            const res = arrayProto[method].apply(this, args);
            //data中每个数组都有一个__ob__的私有属性指向创建的Observer实例（有兴趣看看源码中的observe方法，这里不详述）
            const ob = this.__ob__;

            let inserted = null;

            //记录插入的值
            switch(method) {
                case 'push':
                case 'unshift':
                    inserted = args;
                    break;
                case 'splice':
                    inserted = args.slice(2);
                    break;
            }

            if (inserted) {
                //如果是调用了push、unshift、splice，则尝试对新插入的值进行响应式绑定，因为插入的值有可能是对象(Object)或者数组(Array)
                ob && ob.observeArray(inserted);
            }

            console.log('数组发生改变了');

            //向所有依赖发送通知，告诉它们数组的值发生变化了
            ob && ob.dep.notify();
            return res;
        });
    });

    return function (target) {
        //看看浏览器支不支持__proto__这个属性，通过改变__proto__的值，可以设置对象的原型
        if ('__proto__' in {}) {
            //将数组的原型指向arrayMethods，这样当数组调用上述的7个方法时，其实是调用arrayMethods中的方法而不是调用Array.prototype中的方法
            target.__proto__ = arrayMethods;
        } else {
            //如果浏览器不支持__proto__，则设置数组对应的属性，这样当数组调用上述的7个方法时，其实是调用数组对应属性指向的方法
            for (let i = 0, l = methodsToPatch.length; i < l; i++) {
                let key = methodsToPatch[i];
                def(target, key, arrayMethods[key]);
            }
        }
    }
})();

//测试
let arr = [1, 2, 3];
patchArray(arr);
arr.push(4);