vue中针对数组和对象如何实现监听？

当你耐心看完，绝对有收获

监听的本质是什么？

其实就是调用了Object.defineProperty 这个方法，将数据变为响应式数据

（1）如何对对象监听其属性呢？

通过读Vue源码可以知道，定义了一个方法 叫做defineReactive，接收三个参数，第一个参数：对象名，第二个参数，对象的键，第三个是对象的值。在其内部调用Object.defineProperty()方法，实现数据的响应式。

    

但只通过definereactive ，单单只是设置了一个属性，变成了响应式数据，没有监听其他属性，

此时就需要对 defineReactive进行再次封装， 封装为 Observer

先获取其所有键，根据其键的长度，进行for循环，给每个属性都调用一次defineReactive方法，从而达到 每个属性都是响应式的

此时我们注意到了 ，在defineReactive中： 通过判断此键的值，是不是对象，如果是对象，则重新掉用 Observer ， 从而达到这个对象的所有属性 都是响应式数据

 （2）数组实现监听

对数组来讲，修改数组的方法有pop、shift、unshift、splice、sort、reverse 、push 七种方法

但这些都在Array原型上，我们要想让其也成为响应式数据，则也要借助Object.definePrototype(),  所以我们要对这些方法进行修改与加工，即创建一个拦截器

创建一个对象，该对象的原型指向Array的原型对象，修改其中的方法，让其也使用Object.definePrototype()，从而达到 实现成为响应式数据。

但不能改Array的原型都修改了，这样会造成全局污染，则只拦截器方法挂载到 需要为响应式数据的数组身上

判断是否是数组，如果是数组

1.则将其原型改变为arrayMethods（即拦截器上）

2.但有些浏览器是不支持__proto__,如果不支持的话，我们可以将拦截器挂载到 数组的属性上

      

    判断是否支持__proto__ ，如果直接则直接挂载的原型上即可

 如果不支持__proto__,则直接遍历挂载到数组的属性上