昆山网站建设官网,搜索优化推广公司,工作中存在的问题和不足,深圳市工程建设交易服务中心网站vue响应式原理 vue响应式原理vue2响应式原理目标对象为数组时 vue3响应式原理Vue3和Vue2在响应式系统方面的对比数据劫持的方式支持数据劫持的数据类型Vue3响应式系统显著优点是#xff1a; vue响应式原理
无论vue2和vue3响应式都是通过观察者模式#xff08;发布订阅模式 vue响应式原理
无论vue2和vue3响应式都是通过观察者模式发布订阅模式实现的 涉及到目标对象target依赖收集dep观察者watcher vue2和Vue3的响应式系统同样包含三个阶段1.数据劫持变动侦测2.收集依赖观察者3.通知依赖观察者。
vue2响应式原理
数据劫持目标对象通过observe函数新增__ob__属性这个属性是一个observer的一个实例这个observer实例有dep的属性dep指向的是依赖收集者自己本身然后对目标对象每一个属性执行definereactive将属性转换成访问器属性这样我们就可以通过对属性的读写进行拦截
目标对象为数组时
对数组的侦测首先重写数组的原型为arrayMethods然后遍历数组对每一个元素调用observe函数。何为arrayMethods首先设置arrayMethods的原型为Array.prototype然后往arrayMethods上定义7个属性这7个属性其实是重写的7个数组变异方法。有的数组变异方法是可以新增元素的要把新增加的元素变成响应式的在所有的变异方法里都会调用数组的__ob__.dep.notify方法通知观察者。示意图如下
收集依赖当执行观察者get方法时会触发目标对象属性的getter方法在getter方法里收集观察者这个过程就是“收集观察者”。
通知观察者当目标对象属性变更时会触发目标对象的setter方法在setter方法里执行观察者的update方法
vue3响应式原理
数据劫持reactive函数生成Proxy代理对象可以对5种操作进行拦截。get traphas trapownKeys trapdeleteProperty trapset trap
收集依赖Vue3的观察者不叫Watcher而是叫effect它是基于ReactiveEffect接口实现的。effect初始化时执行它的入参fnfn里执行proxy对象的值触发get/has/ownKeys trap。在get/has/ownKeys trap 里执行track方法将目标对象属性和观察者存储到依赖收集表
通知依赖当proxy对象的值发生改变触发deleteProperty/set trap。在deleteProperty/set trap 里执行trigger方法从依赖收集表中找出目标对象属性对应的观察者set集合遍历所有的观察者执行run方法最终会执行effect的入参fn函数。
Vue3和Vue2在响应式系统方面的对比
数据劫持的方式
Vue3的数据劫持是通过Proxy实现的而Vue2是通过Object.defineProperty实现的长远来看JS引擎会继续优化Proxy但Object.defineProperty不会再有针对性的优化所以Proxy性能上整体优于Object.defineProperty 总结Vue3比Vue2有更快的性能。
支持数据劫持的数据类型
Vue3支持Object、Array、Map、WeakMap、Set、WeakSet六种数据类型的数据劫持而Vue2只支持Object、Array两种数据类型并且Vue3可以劫持对象的属性增删和数组的索引操作。 总结Vue3支持更多数据类型的数据劫持。
Vue3响应式系统显著优点是
有更快的性能、占用更小的内存、支持Vue根数据增删属性的拦截、支持数组的拦截。
