说一说你对Vue响应式原理的理解

最近发现好多同学在面试回答Vue响应式原理时，都只是回答了其中一部分，要么就是真的不了解，要么就是不知道该怎么完美回答这个问题，今天，理想哥就和大家说说 该怎么样完美的回答这个问题，征服面试官。

还是老规矩，麻烦大家先点个赞收藏下，且听理想哥说来。

关于这个面试题，大家可以套用这个模板来回答：vue2是怎么做的？vue2这种方法有什么问题？vue3又是怎么做的？vue3是怎么解决vue2的这些问题的？

接下来，理想哥给个完整的回答，大家可以参考下

关于Vue的响应式原理，vue2中是使用了Object.defineProperty来实现的，在页面开始加载时，vue会遍历data中的所有属性，并使用 Object.defineProperty 把这些属性全部都转为 getter/setter，当用户访问或者设置属性时，会触发 getter/setter 方法，然后通知每个组件实例对应的watcher方法，然后实现视图的更新

但是，Object.defineProperty也是有缺点的，主要有以下三个缺点：

第一个，对于复杂对象需要深度监听，一次性监听到底，计算量比较大

第二，对于对象的新增/删除属性的操作，无法监听，需要使用Vue.$set、Vue.$delete辅助

第三，需要重写数组原生方法实现数组的监听

所以，在vue3中，使用了proxy来代替defineProperty，proxy有以下几个优势：

第一，可以直接监听整个对象，而不需要遍历监听属性，性能会有提升

第二，proxy可以直接监听数组的变化，而不需要再去重写数组原生方法

第三，Proxy 有多达 13 种拦截方法，功能更加强大

第四，Proxy 作为新标准将受到浏览器厂商重点持续的性能优化，也就是传说中的新标准的性能红利；

以上就是我的回答

怎么样？这样回答是不是就很完美了，大家下次面试时候可以试着这么回答，看看面试官啥表情。#前端##前端 开发工程师##前端面试必备宝典#