Vue 3 的响应式原理实现（附源码）-天翼云

Vue 3 是一个用于构建用户界面的渐进式框架，其核心特性之一是响应式系统。响应式系统使得数据变化能够自动更新视图，而无需手动操作 DOM。本篇博客将详细介绍 Vue 3 的响应式原理，并逐步展示如何实现一个类似的响应式系统。

1. 什么是响应式

响应式编程是一种编程范式，通过数据流和变化传播简化开发。在响应式系统中，当数据发生变化时，相关的视图会自动更新。这种机制在构建动态用户界面时尤为重要，因为它减少了手动操作 DOM 的复杂度。

2. Vue 3 响应式系统概述

Vue 3 的响应式系统基于 JavaScript 的 Proxy 对象和 Reflect API。Proxy 对象可以拦截并自定义对目标对象的基本操作（例如属性读取、赋值、删除等）。Reflect API 提供了与这些拦截操作相对应的默认行为，使代理操作更加直观和简洁。

2.1 核心概念

Reactive Object: 使用 Proxy 包装的对象，能够自动追踪对其属性的访问和修改。
Dependency Tracking: 在读取响应式对象的属性时，记录哪些依赖需要更新。
Effect: 当依赖的属性发生变化时，触发对应的更新操作。

3. 基础实现

3.1 创建响应式对象

我们可以使用 Proxy 创建一个简单的响应式对象：

function reactive(target) {
  if (typeof target !== 'object' || target === null) {
    return target;
  }

  const handler = {
    get(target, key, receiver) {
      console.log(`Getting ${key}`);
      return Reflect.get(target, key, receiver);
    },
    set(target, key, value, receiver) {
      console.log(`Setting ${key} to ${value}`);
      return Reflect.set(target, key, value, receiver);
    }
  };

  return new Proxy(target, handler);
}

const state = reactive({ count: 0 });
console.log(state.count); // Getting count
state.count = 1; // Setting count to 1

在这个简单的实现中，reactive 函数使用 Proxy 创建了一个响应式对象，并在属性读取和设置时打印日志。

3.2 解释代码

这里的 reactive 函数接受一个目标对象 target，并返回一个新的 Proxy 对象。Proxy 对象使用 handler 来拦截对目标对象的操作。在 handler 中，我们定义了 get 和 set 方法，用于处理属性的读取和赋值操作。

get 方法：当读取属性时，会输出属性名，并通过 Reflect.get 获取属性值。
set 方法：当设置属性时，会输出属性名和新值，并通过 Reflect.set 设置属性值。

4. 代理对象的深入理解

4.1 处理基本数据类型

在实际应用中，我们通常处理的对象包含基本数据类型（如字符串、数字、布尔值等）。为了确保代理对象能够正确处理这些类型，我们需要在 reactive 函数中添加类型检查：

function reactive(target) {
  if (typeof target !== 'object' || target === null) {
    return target;
  }

  const handler = {
    get(target, key, receiver) {
      const result = Reflect.get(target, key, receiver);
      console.log(`Getting ${key}: ${result}`);
      return result;
    },
    set(target, key, value, receiver) {
      console.log(`Setting ${key} to ${value}`);
      return Reflect.set(target, key, value, receiver);
    }
  };

  return new Proxy(target, handler);
}

const state = reactive({ name: 'Vue', version: 3 });
console.log(); // Getting name: Vue
state.version = 4; // Setting version to 4

通过这个实现，我们可以看到 reactive 函数不仅能够处理嵌套对象，还能处理基本数据类型。

5. 处理嵌套对象

5.1 递归处理嵌套对象

为了解决嵌套对象的问题，我们需要在读取属性时递归地将其转换为响应式对象：

function reactive(target) {
  if (typeof target !== 'object' || target === null) {
    return target;
  }

  const handler = {
    get(target, key, receiver) {
      const result = Reflect.get(target, key, receiver);
      console.log(`Getting ${key}: ${result}`);
      return reactive(result); // 递归处理嵌套对象
    },
    set(target, key, value, receiver) {
      console.log(`Setting ${key} to ${value}`);
      return Reflect.set(target, key, value, receiver);
    }
  };

  return new Proxy(target, handler);
}

const state = reactive({ nested: { count: 0 } });
console.log(state.nested.count); // Getting nested: [object Object], Getting count: 0
state.nested.count = 1; // Getting nested: [object Object], Setting count to 1

现在，嵌套对象也会变成响应式的。

5.2 解释代码

在 get 方法中，我们使用 reactive 函数递归地将结果转换为响应式对象。这确保了无论对象嵌套层次多深，都能正确处理属性读取和设置。

6. 依赖收集与触发更新

为了实现响应式系统的核心功能，我们需要跟踪依赖关系，并在数据变化时触发更新。

6.1 创建依赖收集机制

我们可以使用一个全局的依赖容器来存储当前的副作用函数，并在属性读取时收集依赖：

let activeEffect = null;

function effect(fn) {
  activeEffect = fn;
  fn();
  activeEffect = null;
}

const targetMap = new WeakMap();

function track(target, key) {
  if (activeEffect) {
    let depsMap = targetMap.get(target);
    if (!depsMap) {
      depsMap = new Map();
      targetMap.set(target, depsMap);
    }

    let deps = depsMap.get(key);
    if (!deps) {
      deps = new Set();
      depsMap.set(key, deps);
    }

    deps.add(activeEffect);
  }
}

function trigger(target, key) {
  const depsMap = targetMap.get(target);
  if (!depsMap) {
    return;
  }

  const deps = depsMap.get(key);
  if (deps) {
    deps.forEach(effect => effect());
  }
}

function reactive(target) {
  if (typeof target !== 'object' || target === null) {
    return target;
  }

  const handler = {
    get(target, key, receiver) {
      const result = Reflect.get(target, key, receiver);
      track(target, key); // 收集依赖
      return reactive(result); // 递归处理嵌套对象
    },
    set(target, key, value, receiver) {
      const oldValue = target[key];
      const result = Reflect.set(target, key, value, receiver);
      if (oldValue !== value) {
        trigger(target, key); // 触发更新
      }
      return result;
    }
  };

  return new Proxy(target, handler);
}

// 使用示例
const state = reactive({ count: 0 });

effect(() => {
  console.log(`Count is: ${state.count}`);
});

state.count = 1; // 输出：Count is: 1
state.count = 2; // 输出：Count is: 2

6.2 解释代码

effect 函数：用于注册副作用函数，执行并收集依赖。
track 函数：在读取属性时调用，收集依赖，将当前的副作用函数添加到依赖集合中。
trigger 函数：在设置属性时调用，触发所有依赖该属性的副作用函数。

7. 完整实现代码

结合上述所有步骤，我们可以得到一个完整的响应式系统实现：

let activeEffect = null;

function effect(fn) {
  activeEffect = fn;
  fn();
  activeEffect = null;
}

const targetMap = new WeakMap();

function track(target, key) {
  if (activeEffect) {
    let depsMap = targetMap.get(target);
    if (!depsMap) {
      depsMap = new Map();
      targetMap.set(target, depsMap);
    }

    let deps = depsMap.get(key);
    if (!deps) {
      deps = new Set();
      depsMap.set(key, deps);
    }

    deps.add(activeEffect);
  }
}

function trigger(target, key) {
  const depsMap = targetMap.get(target

);
  if (!depsMap) {
    return;
  }

  const deps = depsMap.get(key);
  if (deps) {
    deps.forEach(effect => effect());
  }
}

function reactive(target) {
  if (typeof target !== 'object' || target === null) {
    return target;
  }

  const handler = {
    get(target, key, receiver) {
      const result = Reflect.get(target, key, receiver);
      track(target, key);
      return reactive(result);
    },
    set(target, key, value, receiver) {
      const oldValue = target[key];
      const result = Reflect.set(target, key, value, receiver);
      if (oldValue !== value) {
        trigger(target, key);
      }
      return result;
    }
  };

  return new Proxy(target, handler);
}

// 使用示例
const state = reactive({ count: 0, nested: { value: 10 } });

effect(() => {
  console.log(`Count is: ${state.count}`);
});

effect(() => {
  console.log(`Nested value is: ${state.nested.value}`);
});

state.count = 1; // 输出：Count is: 1
state.nested.value = 20; // 输出：Nested value is: 20

7.1 解释代码

reactive 函数：接受一个目标对象，返回一个响应式的 Proxy 对象。
handler 对象：定义 get 和 set 方法，分别用于收集依赖和触发更新。
effect 函数：注册副作用函数，执行并收集依赖。

8. 实例应用与扩展

8.1 添加删除属性的响应式处理

在实际应用中，添加和删除属性也是常见操作。我们可以通过扩展 set 和 deleteProperty 方法来处理这些情况：

function reactive(target) {
  if (typeof target !== 'object' || target === null) {
    return target;
  }

  const handler = {
    get(target, key, receiver) {
      const result = Reflect.get(target, key, receiver);
      track(target, key);
      return reactive(result);
    },
    set(target, key, value, receiver) {
      const oldValue = target[key];
      const result = Reflect.set(target, key, value, receiver);
      if (oldValue !== value) {
        trigger(target, key);
      }
      return result;
    },
    deleteProperty(target, key) {
      const result = Reflect.deleteProperty(target, key);
      trigger(target, key);
      return result;
    }
  };

  return new Proxy(target, handler);
}

// 使用示例
const state = reactive({ count: 0 });

effect(() => {
  console.log(`Count is: ${state.count}`);
});

state.count = 1; // 输出：Count is: 1
delete state.count; // 输出：Count is: undefined

8.2 深入理解 WeakMap 的使用

WeakMap 是 JavaScript 中的一种集合类型，它允许我们使用对象作为键，并且不会阻止垃圾回收。由于 Vue 3 的响应式系统需要处理大量对象，WeakMap 非常适合用来存储对象的依赖关系。

9. 总结

本文详细介绍了 Vue 3 响应式系统的实现原理，并通过逐步实现展示了其核心机制。我们从基本的响应式对象创建开始，逐步增加对嵌套对象的处理，最终实现了完整的依赖收集与触发更新机制。理解这些原理不仅有助于深入掌握 Vue 3，还能帮助我们在其他项目中应用类似的响应式编程技术。

活动

应用商城

合作伙伴

开发者

支持与服务

了解天翼云

Vue 3 的响应式原理实现（附源码）

Vue 3 的响应式原理实现（附源码）

1. 什么是响应式

2. Vue 3 响应式系统概述

2.1 核心概念

3. 基础实现

3.1 创建响应式对象

3.2 解释代码

4. 代理对象的深入理解

4.1 处理基本数据类型

5. 处理嵌套对象

5.1 递归处理嵌套对象

5.2 解释代码

6. 依赖收集与触发更新

6.1 创建依赖收集机制

6.2 解释代码

7. 完整实现代码

7.1 解释代码

8. 实例应用与扩展

8.1 添加删除属性的响应式处理

8.2 深入理解 WeakMap 的使用

9. 总结

相关文章

python——装饰器深入研究（二）

python中常用的魔术方法总结-__enter__、__exit__

python面向对象编程之类方法、实例方法、静态方法、类属性、实例属性

构建基于Spring WebFlux的响应式Java应用

Java 类和对象

Java 响应式编程：探索 Reactive Streams 等

Java面向对象编程进阶-关键字：this

Java面向对象编程高阶-代码块

python知识点总结-对Python中模块和包的理解

设计模式：（访问者模式）

作者介绍

最新文章

python面向对象编程之类方法、实例方法、静态方法、类属性、实例属性

构建基于Spring WebFlux的响应式Java应用

Java 类和对象

Java 响应式编程：探索 Reactive Streams 等

Java面向对象编程高阶-代码块

python知识点总结-对Python中模块和包的理解

热门文章

游戏编程之十一 图像页CPICPAGE介绍

1.7 面向对象

synchronized 作用范围《并发编程》

C#类和对象

【JavaSE】构造方法基本使用

JavaOOP面试题（108道）

热门标签

相关产品

弹性云主机

天翼云电脑（公众版）

对象存储

云硬盘

随机文章

python动态获取对象的属性和方法

Java面向对象（下）

用 VS Code 搞 Qt6：信号、槽，以及QObject

Java面向对象编程进阶-关键字：this

Spring核心知识总结及底层源码分析

Python快速入门：Python对象

python中常用的魔术方法总结-enter、exit

游戏编程之十一图像页CPICPAGE介绍