你是怎么理解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 作为新标准将受到浏览器厂商重点持续的性能优化，也就是传说中的新标准的性能红利；

以上就是这个问题的回答了，大家可以下次面试时试试这么回答看看效果。

最后，关于关注理想哥，每天学点前端面试小技巧。