vue3 的响应式远离

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