Vue响应式原理

在Vue对象初始化时,对data属性指向对象的每一个属性都会进行reactive化,即将每一个属性的getter和setter重写,在Vue2中使用Object.defineProperty,在Vue3中使用Proxy。
对Data中的每一个属性,都会绑定一个dep对象作为观察者,每个需要对该属性进行监听的实例都要在这个对象中注册自己的监听函数。应该在对象的getter中收集依赖,而在对象的setter中触发依赖。在初始化对象时,对每一个属性都建立一个dep对象,该属性的getter设置为在dep中的依赖数组中push新依赖,在setter中实行队列中的所有依赖。
Vue2和Vue3的区别:
Object.defineProperty对对象的某个属性进行修改,因此,由于性能方面的原因(数组下标本质也是以数字作为属性名的属性,对每个下标进行监听且在修改过程中各个元素的下标会发生变化,可能会导致严重的性能问题),无法对数组进行监控,解决方法是重写数组上可能会对数组本身进行修改的方法
Proxy直接对整个对象进行修改,因此可以监控数组,但是在必要的时候需要嵌套对对象属性进行修改

全部评论

相关推荐

不愿透露姓名的神秘牛友
11-26 15:46
已编辑
字节国际 电商后端 24k-35k
点赞 评论 收藏
分享
牛客771574427号:恭喜你,华杰
点赞 评论 收藏
分享
评论
点赞
收藏
分享
牛客网
牛客企业服务