当前位置: 首页 > 面试经验 >

你是怎么理解Vue响应式原理的?

优质
小牛编辑
51浏览
2024-05-29

你是怎么理解Vue响应式原理的?

你是怎么理解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届软开秋招面试经验大赏##前端爆了#
 类似资料: