浅谈Vue2与Vue3的双向绑定原理的理解

一、Vue2双向绑定原理

? ? ? ? Vue2使用双向绑定核心原理是基于数据劫持发布-订阅模式。一部分通过数据劫持（Object.defineProperty()）和Watcher类。

? ? ? ? 数据劫持：Vue2使用Object.defineProperty()方法劫持数据对象的属性，对属性getter和setter拦截，属性被访问或者修改，除非getter和setter，实现数据响应式。

? ? ? ? Wather类：Wather用于订阅数据变化和视图更新。每个数据都有一个Wacher实例，当数据发生变化时，触发setter，并通知Watcher，然后Wacher会调用其函数，将值更新在DOM。

二、Vue3双向绑定原理

? ? ? ? Vue3双向绑定原理基于Proxy。

? ? ? ? Proxy:Vue3使用Proxy对象创建一个数据代理，当属性被访问或修改，触发Proxy拦截器实现数据响应。

三、Vue3的优势

? ? ? ?在Vue 2中，通过Object.defineProperty实现数据的响应式，这需要对对象的每个属性进行逐一定义，存在一些性能上的开销；在Vue 3中，使用原生ES6 Proxy实现响应式。Proxy可以拦截对对象的访问，使得可以在访问、赋值、删除等操作时执行自定义的逻辑。这样一来，Vue 3能够更灵活、高效地处理数据的响应式，而不需要对每个属性进行单独的处理，从而提高了性能。

????????Proxy能够直接对整个对象进行代理，包括对象内部的嵌套对象，而Object.defineProperty需要递归处理。

????????