vue 双向数据绑定

vue.js 采用数据劫持 和发布-订阅模式来实现的。

数据劫持：

        vue.js通过Object.defineProperty()方法来劫持数据对象的属性，将这些属性转化为getter/setter，当数据变化时，getter/setter会触发相应的更新操作。

发布-订阅模式：

        vue.js使用一个观察者（Watcher）来订阅数据的变化，当数据变化时，Watcher会通知所有的订阅者（订阅该数据的组件），相关组件重新渲染。

实现双向数据绑定：

        vue.js中模板（template）用指令（如v-model）进行数据绑定，指令会创建一个Watcher，数据有变化，Watcher会触发视图更新

总结：

Vue.js 的双向数据绑定是通过数据劫持和发布-订阅模式来实现的。数据劫持 拦截和监控数据的变化 ，发布-订阅 负责通知 和 更新视图

在 Vue 3 中，使用 Proxy 对数据进行劫持，从而实现对数据的监听和响应。Proxy 可以直接监听对象属性的变化，并且可以监听数组的变化，这使得 Vue 3 的响应式系统更加高效和灵活 。

使用 Proxy 进行响应式数据劫持

        在 Vue 3 中，使用 Proxy 对数据进行劫持，从而实现对数据的监听和响应。Proxy 可以直接监听对象属性的变化，并且可以监听数组的变化，这使得 Vue 3 的响应式系统更加高效和灵活。

 依赖收集和触发更新

        Vue 3 中使用 effect 函数进行依赖收集，并在数据变化时触发更新。

 在 Vue 3 中实现双向数据绑定

        在 Vue 3 中，可以使用 ref 和 reactive 创建响应式数据，并结合模板语法和指令实现双向数据绑定。

总结

        Vue 3 通过 Proxy 和 Reflect 实现了更为高效和灵活的响应式数据系统。使用 ref 和 reactive 创建响应式数据，并结合 effect 函数进行依赖收集和触发更新，从而实现了双向数据绑定。相比于 Vue 2，Vue 3 的响应式系统在性能和功能上都有了显著提升。