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直接对整个对象进行修改,因此可以监控数组,但是在必要的时候需要嵌套对对象属性进行修改

全部评论

相关推荐

面试官全程关摄像头1.自我介绍一下2.React和Vue哪个更熟悉一点3.你在之前那段实习经历中有没有什么技术性的突破(我只是实习了44天工作28天,我把我能说的都说了)4.你封装的哪个表单组件支不支持动态传值5.自己在实习阶段Vue3项目封装过hook吗6.hook有什么作用7.Vue2和Vue3的响应式区别(我说一个是proxy是拦截所有的底层操作,Object.defineProperty本身就是一个底层操作,有些东西拦截不了,比如数组的一些操作还有等等,面试官就说实在要拦截能不能拦截????我心想肯定不行呀,他的底层机制就不允许吧)8.pinia和vuex的区别(这个回答不出来是我太久没用了)9.pinia和zustand的区别,怎么选(直接给我干懵了)(我说react能用pinia吗  他说要用的话也可以)10.渲染一万条数据,怎么解决页面卡顿问题(我说分页、监听滚轮动态加载,纯数据展示好像还可以用canvas画)(估计是没说虚拟表单,感觉不满意)11.type和interface的区别12.ts的泛型有哪些作用(我就说了一个结构相同但是类型不同的时候可以用,比如请求响应的接口,每次的data不同,这里能用一个泛型,他问我还有什么)13.你项目用的是React,如果让你再写一遍你会选择什么14.pnpm、npm、yarn的区别15.dependencies和devdependencies的区别总而言之太久没面试了,上一段实习的面试js问了很多。结果这次js一点没问,网络方面也没考,表现得很一般,但是知道自己的问题了  好好准备,等待明天的影石360和周四的腾讯了  加油!!!
解zj:大三的第一段面试居然是这样的结局
查看15道真题和解析
点赞 评论 收藏
分享
不愿透露姓名的神秘牛友
11-21 11:29
已编辑
斯卡蒂味的鱼汤:知道你不会来数马,就不捞你😂最近数马疯狂扩招,招聘要求挺低的,你能力肯定够,应该就是因为太强了,知道你不会来才不捞你
投递腾讯云智研发等公司7个岗位
点赞 评论 收藏
分享
评论
点赞
收藏
分享

创作者周榜

更多
牛客网
牛客网在线编程
牛客网题解
牛客企业服务