Vue 的相应式原理

1. 数据挟制

① Vue 2 利用defineproperty()

在 Vue 2.x 中，Vue 利用 Object.defineProperty() 来拦截对象属性的getter和setter。每当一个 Vue 实例被创建时，它会遍历全部传入的数据对象的属性，并将它们转换为 getter 和 setter。

2. // 简化版示例
3. function defineReactive(obj, key, val) {
4.   Object.defineProperty(obj, key, {
5.     get: function reactiveGetter() {
6.       // 收集依赖
7.       return val;
8.     },
9.     set: function reactiveSetter(newVal) {
10.       if (newVal === val) return;
11.       val = newVal;
12.       // 触发更新
13.     }
14.   });
15. }

复制代码

范围性：

• 它不能检测到新增或删除属性。
  
• 对于数组的利用无法直接拦截，因此 Vue 须要重写数组的部门方法来实现相应式。
  

② Vue 3 利用 Proxy

从 Vue 3 开始，Vue 引入了 ES6 的 Proxy 来更换 Object.defineProperty()。Proxy 提供了更强大的功能，可以拦截更多的利用范例，如添加新属性、删除属性等，而且可以递归地处理惩罚嵌套对象，而不须要像 Object.defineProperty() 那样手动遍历每个属性。

2. // 简化版示例
3. const handler = {
4.   get(target, key, receiver) {
5.     // 收集依赖
6.     return Reflect.get(target, key, receiver);
7.   },
8.   set(target, key, value, receiver) {
9.     const result = Reflect.set(target, key, value, receiver);
10.     // 触发更新
11.     return result;
12.   }
13. };
14. const proxy = new Proxy(data, handler);

复制代码

2. 依赖网络

Vue 利用观察者模式来实现依赖网络。每当渲染组件时，Vue 会实验模板中表达式的 getter，从而触发依赖网络过程。在此过程中，Vue 会记载哪些 watcher 订阅了特定的数据属性的变革。

•         Watcher：每一个须要相应数据变革的地方（比方，盘算属性、渲染函数）都有一个对应的 watcher。watcher 负责监听它所关心的数据属性的变革，并在变革发生时更新干系的视图部门。
  
•         Dep（依赖）：每个相应式属性都有一个关联的 Dep 实例，用来管理全部订阅它的 watcher。当该属性发生变革时，Dep 会关照全部的 watcher 举行更新。
  

3. 视图更新机制

当用户交互或其他代码导致数据属性发生变革时，Vue 的相应式体系会调用该属性的 setter 方法。setter 不但会设置新的值，还会关照全部订阅了该属性变革的 watcher。然后，这些 watcher 会重新评估并触发视图更新。

• 异队伍列：为了进步性能，Vue 将全部的 DOM 更新利用批量放入一个异队伍列中，在下一个事故循环 tick 时同一实验。这淘汰了不须要的重绘和回流，提拔了应用的服从。
  2. queueWatcher(watcher) {
  3.   // 如果 watcher 已经在队列中，则跳过
  4.   if (!watcher.id) {
  5.     watcher.id = nextId++;
  6.     queue.push(watcher);
  7.   }
  8.   // 批量更新
  9.   nextTick(flushSchedulerQueue);
  10. }

  复制代码

4. 盘算属性与侦听器

除了直接绑定到数据属性外，Vue 还提供了盘算属性（computed properties）和侦听器（watchers），允许开辟者基于现有数据派生出新的状态大概实验副作用利用。

•         盘算属性：盘算属性是缓存的，只有在其依赖的数据发生变革时才会重新盘算。它们非常适实用于复杂逻辑的推导或格式化输出。
  
•         侦听器：侦听器则可以用来实验更复杂的逻辑，好比异步利用或开销较大的使命。侦听器可以在数据变革时立即实验，也可以指定深度监听。
  

5. Vue 3 中的改进

Vue 3 在多个方面临相应式体系举行了优化：

•         更好的性能：通过利用 Proxy 和更加高效的依赖跟踪机制，Vue 3 明显进步了相应式的性能。
  
•         更简单的 API：引入了 Composition API，使得逻辑复用更加简单直观，同时支持 TypeScript 更加友爱。
  
•         细粒度的相应式：Vue 3 提供了 reactive 和 ref 两种方式来创建相应式对象，此中 ref 实用于单一值的相应式封装，而 reactive 则用于对象或数组。
  
•         内置工具函数：如 toRefs 和 isRef，资助开辟者更好地管理和利用相应式对象。