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

监听的本质是什么?

其实就是调用了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__,则直接遍历挂载到数组的属性上

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐