vue响应式原理

Vue2响应式

在 Vue2 的响应式系统中，Observer、Watcher 和 Dep 是三个核心概念，它们共同工作以实现数据的响应式更新。以下是这三者之间的关系和作用：

1. Observer

• 作用: Observer 是一个对象，用于将普通的 JavaScript 对象转换为响应式对象。它会遍历对象的属性，并使用 Object.defineProperty 来劫持这些属性的读写操作。
• 功能: Observer 仅为数据添加 getter/setter。

2. Dep

• 作用: Dep 是一个依赖管理器，用于收集和管理所有依赖于某个响应式属性的 Watcher 实例，每一个响应式属性都有对应的Dep。
• 功能: 当getter触发时会将Watcher收集到Dep ;当响应式属性发生变化时，Dep 会通知所有依赖于该属性的 Watcher，以便它们可以重新计算和更新视图。

3. Watcher

• 作用: Watcher 是一个观察者，用于观察响应式数据的变化。每个 Watcher 实例都与一个特定的组件或计算属性相关联。
• 功能: Watcher 在组件初始化或计算属性定义时创建，并在首次求值（触发 getter）时被 Dep 收集为依赖。

关系

• 数据劫持: Vue 在初始化实例时，会对实例中的data选项进行遍历，使用Object.defineProperty()方法为每个属性添加getter和setter方法。当访问或修改对象的属性时，就会触发相应的getter和setter方法
• 数据流: 当这个属性的值发生变化时，Dep 会通知所有相关的 Watcher，从而触发视图的更新。
• 依赖收集: 访问数据触发 getter时会创建Watcher ，从而使 Dep 收集到这个 Watcher。当数据变化时，Dep 会调用所有注册的 Watcher 的更新方法。

总结

• Observer 负责将对象变为响应式。
• Dep 负责管理依赖关系。
• Watcher 负责响应数据变化并更新视图。
• 当首次访问数据或者使用object.defineProperty创建响应式对象时,与此同时Observer会将对象变为响应式(如果是创建对象时),为数据创建getter/setter,当访问数据时会触发getter事件,Observer检测到getter事件后会通知Dep去收集依赖(将对应的Watcher收集),当检测到setter事件时,通知Dep去执行Watcher的回调

Vue3响应式

而在vue3中使用了proxy去代理数据,引入 track 和 trigger 函数，取代了 Vue 2 中依赖收集和 getter/setter 的机制

1. track 函数

track 用于收集对某个响应式属性的依赖。当访问某个属性时，track 会被调用，以记录当前活跃的 Watcher（即 effect）。
当通过 Proxy 访问某个响应式对象的属性时，当前的活跃 effect 就会被记录。具体而言，当调用 reactive 对象的 getter 时，内部实现会触发 track 函数。

2. trigger 函数

trigger 用于通知所有依赖于某个属性的 watcher 在数据变化时进行更新。当某个响应式属性的值被修改时，trigger 会被调用，通知所有依赖这个属性的 effect 进行更新。
当设置属性的新值时，对应的 setter 会调用 trigger 函数。

收到数据的访问时，使用 track 将当前 watcher 添加到该属性的依赖。
在数据修改时，使用 trigger 通知所有依赖于该属性的 watchers 更新，从而确保组件的视图与数据保持同步。

与 Vue 2 的对比

在 Vue 2 中，依赖收集是通过 Object.defineProperty 的 getter 和 setter 实现的，每个属性需要单独设置，而 Vue 3 的设计通过 track 和 trigger 函数让整个流程更加灵活和高效：

Vue 2 的响应式机制依赖于 dep 的 getter和 setter，而 Vue 3 通过 Proxy 和 track、trigger 完成了更通用、更高效的依赖管理。

vue2每一个响应式数据对应一个dep,通过dep完成依赖管理,而vue3使用track 和 trigger 这两个函数自动管理所有依赖,所以vue3的响应式对象才能做到全局响应

Vue 3 可以更方便地处理访问和修改嵌套属性，通过自动的依赖收集（track）使得整个过程变得更加简洁。