vue3 双向绑定的原理

Vue3 中的双向绑定原理与 Vue2 中的双向绑定原理有所不同。在 Vue2 中，双向绑定是通过 Object.defineProperty() 方法实现的，即通过监听数据对象的属性值的变化来更新视图，并通过监听视图中表单元素的变化来更新数据对象的属性值。但是这种方式存在性能问题，因为它需要递归地遍历对象的所有属性来进行监听。

在 Vue3 中，双向绑定的实现方式是使用了 Proxy 对象。Proxy 是 ES6 中新增的一个对象，它可以在对象和函数之间加一个拦截层，从而对对象和函数的访问进行拦截和修改。Vue3 中通过使用 Proxy 对数据进行代理，当数据被修改时，可以直接触发更新视图的操作，从而实现双向绑定。

具体来说，Vue3 中会创建一个 Reactive 对象，这个对象会通过 Proxy 进行代理，同时会为 Reactive 对象中的每一个属性都创建一个对应的 Dep 对象（依赖对象）。当 Reactive 对象中的属性被访问时，会触发 get() 方法，get() 方法会将当前的 Watcher 对象添加到对应的 Dep 对象中，表示当前的 Watcher 对象依赖于这个属性。当 Reactive 对象中的属性被修改时，会触发 set() 方法，set() 方法会通知对应的 Dep 对象，从而触发所有依赖于这个属性的 Watcher 对象进行更新。

总结来说，Vue3 中的双向绑定通过使用 Proxy 对象和 Dep 对象来实现，相比 Vue2 中的实现方式，性能更好，且代码实现也更为简洁。