你是怎么理解Vue响应式原理的?,这是一道前端面试非常高频的Vue面试题,但是很多同学在面试时候只能说出个大概,老规矩,点赞收藏支持一下,给我一分钟,理想哥教大家该怎么满分回答这个问题
如果我是求职者,我会这么回答:
在vue2中,Vue的响应式原理是使用Object.defineProperty来实现的,使用defineProperty挨个对data中的属性实现监听,当数据变化后再去触发视图的更新。
但是Object.defineProperty有以下缺点
第一,对于复杂对象需要深度监听,一次性监听到底,计算量比较大
第二,对于对象的新增/删除属性的操作,无法监听,需要 Vue.$set、Vue.$delete辅助
第三,需要重写数组原生方法实现数组监听
鉴于以上缺点,所以,vue3中,改成了使用proxy来实现,相比defineProperty,proxy有以下优势:
第一,Proxy 可以直接监听对象而非属性,不需要再使用$set和$delete辅助更新
第二,Proxy 可以直接监听数组的变化,不需要再去重写数组原生方法。
第三,Proxy 有多达 13 种拦截方法,不限于 apply、deleteProperty、has 等等,这是 Object.defineProperty 不具备的;
第四,Proxy 返回的是一个新对象,我们可以只操作新的对象达到目的,而 Object.defineProperty 只能遍历对象属性直接修改;
第五,Proxy 作为新标准将受到浏览器厂商重点持续的性能优化,也就是传说中的新标准的性能红利;
以上就是这个问题的回答了,大家可以下次面试时试试这么回答看看效果。
最后,关于关注理想哥,每天学点前端面试小技巧。
#23届找工作求助阵地##24届软开秋招面试经验大赏##前端爆了#