vue2和vue3响应式原理

vue2响应式原理

Vue2 响应式原理是通过 Object.defineProperty 这个 API 来实现的。 Vue2 响应式的基本原理：

1. 数据劫持：在 Vue 初始化时，Vue 会遍历 data 中的所有属性，并使用 Object.defineProperty 把这些属性转化为 getter 和 setter。
2. Getter：在 getter 中，Vue会收集对数据的依赖。当一个属性被读取时，会触发 getter，然后把对应的依赖 (Watcher) 添加到依赖列表中。
3. Setter：在 setter 中，Vue会监听到属性的变化。当一个属性被赋新值时，会触发 setter，然后通知依赖列表中的 Watcher 执行更新。
4. 依赖收集和触发更新：Watcher 这个机制用来收集依赖和触发更新。每个组件实例都会对应一个 Watcher 对象，用来管理该组件所依赖的属性。当一个组件中的数据被访问时，会触发对应的 getter，然后把该组件的 Watcher 添加到依赖列表中。当某个依赖的数据发生变化时，会触发对应的 setter，然后通知依赖列表中的所有 Watcher 执行更新操作。
5. 通过这种方式，Vue实现了响应式的数据绑定。当数据发生变化时，相关的组件会自动更新，并且更新只发生在需要更新的组件上，提高了性能。

总结，Vue2 对象的响应式并不是递归的。只有在初始化时存在的属性才会被转换为响应式属性，新添加的属性或删除的属性不会被响应式监听。如果需要对动态添加的属性进行响应式处理，则可以使用 Vue.set 或 this.$set 方法来实现。
 

vue3响应式原理

Vue 3响应式原理相较于Vue2有较大的改进。Vue 3使用了Proxy对象来实现响应式数据的双向绑定。Vue3的响应式原理实现方式：

1. 在Vue3中，使用reactive函数来创建一个响应式的数据对象。这个函数接收一个普通的JavaScript对象，并将其转化为Proxy对象。Proxy对象允许我们在访问和修改对象属性时拦截并执行自定义的操作。
2. 当我们访问响应式数据对象的属性时，Proxy对象会拦截这个操作，并建立一个依赖关系，将这个属性和正在访问它的地方关联起来。
3. 当我们修改响应式数据对象的属性时，Proxy对象同样会拦截这个操作，并通知所有依赖于这个属性的地方进行更新。
4. 为了更高效地进行依赖追踪，Vue 3使用了一个称为“依赖收集”的技术。在访问响应式数据对象的属性时，Vue3会将正在访问这个属性的地方收集起来，并建立一个依赖关系图。当属性发生变化时，Vue3会根据这个依赖关系图，只更新那些真正依赖于这个属性的地方。
5. 与Vue2相比，Vue3的响应式系统更加灵活和高效。它能够在初始化时追踪到动态添加的属性，并且能够进行深层次的依赖追踪，而不仅限于对象的顶层属性。

总结，Vue3通过使用Proxy对象和依赖收集技术，实现了更高效、更灵活的响应式数据双向绑定机制。这种改进使得Vue3在性能和开发体验上都有了显著的提升。