>[danger]介绍一下Vue2与Vue3中的双向数据绑定 >[info]建议回答 双向数据绑定就是：**数据劫持 + 发布订阅模式（观察者模式）**。 Vue2中在实例初始化时遍历 data 中的所有属性，并使用 **Object.defineProperty**把这些属性全部转为 getter/setter。并 劫持各个属性 getter 和 setter，在数据变化时发布消息给订阅者，触发相应的监听回调，而这之间存在几个问题 * 初始化时需要遍历对象所有 key，如果对象层次较深，性能不好 * 通知更新过程需要维护大量 dep 实例和 watcher 实例，额外占用内存较多 * Object.defineProperty 无法监听到数组元素的变化，只能通过劫持重写数方法 * 动态新增，删除对象属性无法拦截，只能用特定 set/delete API 代替 * 不支持 Map、Set 等数据结构 **Vue3中使用 Proxy 来监控数据的变化**。Proxy 是 ES6 中提供的功能，其作用为：用于定义基本操作的自定义行为（如属性查找，赋值，枚举，函数调用等）。 相对于`Object.defineProperty()`，有以下特点： 1. **Proxy 直接代理整个对象而非对象属性**，这样只需做一层代理就可以监听同级结构下的所有属性变化，包括新增属性和删除属性。 2. 它的处理方式是在 getter 中去递归响应式，这样的好处是真正访问到的内部属性才会变成响应式，简单的可以说是按需实现响应式，减少性能消耗。 3. Proxy 可以监听数组的变化。 >[info]技术详解 在 JavaScript 中，defineProperty 和 Proxy 都是对象的属性访问控制方法，它们有着一些明显的区别。 defineProperty 是一个 ES5 引入的 API，用于在已有对象上定义新属性或者修改现有属性，并且可以精细地控制这个属性的 getter、setter、可枚举性、可配置性和可写性等特性。通过 defineProperty，我们可以对一个对象的属性进行实时监测，从而实现数据绑定和响应式编程等高级功能。 但是，defineProperty 也存在一些限制。它只能监听对象的已有属性，而不能监听整个对象的变化。同时，由于该 API 的使用方式比较繁琐，使得其难以扩展和封装。 相比之下，Proxy 是 ES6 中引入的一个新特性，可以代理 JavaScript 对象的访问，提供了更加灵活的属性访问控制方式。通过在目标对象外层建立一个代理层，Proxy 可以拦截对象的访问、修改、删除、枚举等操作，从而实现更加细粒度的控制。 与 defineProperty 不同的是，Proxy 可以监听整个对象的变化，而不仅仅是某个属性的变化。另外，Proxy 的使用方式相对简单，可以轻松地被扩展和封装，使得其更加适用于面向对象编程和函数式编程等多种编程范式。 总的来说，defineProperty 和 Proxy 都是非常有价值的对象属性访问控制方法。如果需要对对象的某个属性进行深度监测，或者需要更加灵活的属性访问控制方式，那么建议使用 Proxy；如果只需要对对象的某个属性进行简单的监听，那么可以选择使用 defineProperty。 >参考链接 [百度脑图](https://naotu.baidu.com/file/3797643ea48cde0fd8babb5009e71511)