vue中针对数组和对象如何实现监听?
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__,则直接遍历挂载到数组的属性上
更多推荐
所有评论(0)