当前位置：首页 > news >正文

vue3 reactive响应式实现源码

news 2025/8/3 2:37:35

Vue 3 的 reactive 是基于 JavaScript 的 Proxy 实现的，因此它通过代理机制来拦截对象的操作，从而实现响应式数据的追踪。下面是 Vue 3 的 reactive 源码简化版。

Vue 3 `reactive` 源码简化版

首先，我们需要了解 reactive 是如何工作的，核心的功能是使用 Proxy 来代理对象并处理对象的读取和修改。

// reactive.js
export function reactive(target) {// 检查 target 是否是对象if (typeof target !== 'object' || target === null) {return target;}// 使用 Proxy 来代理对象的读取和设置操作return new Proxy(target, {get(target, prop, receiver) {// 当访问对象的属性时，执行 getter// 可以在此处添加追踪操作，比如收集依赖console.log(`Getting ${String(prop)}:`, target[prop]);return target[prop];},set(target, prop, value, receiver) {// 当设置对象的属性时，执行 setter// 可以在此处添加更新操作，比如通知视图更新console.log(`Setting ${String(prop)} to:`, value);target[prop] = value;// 返回 true 表示修改成功return true;}});
}

关键点解释

Proxy：Proxy 是 JavaScript 的一项新特性，它允许我们定义自定义的行为来拦截对象的基本操作（如读取、写入、删除等）。在 reactive 的实现中，Proxy 拦截了对象的 get 和 set 操作。
get：当访问对象的某个属性时，会触发 get 方法。在 get 方法中，我们通常会做两件事：
- 追踪依赖：在 Vue 中，通常会使用依赖收集来追踪视图中对数据的引用。
- 返回属性值：最终返回目标对象的属性值。
set：当设置对象的某个属性时，会触发 set 方法。在 set 方法中，我们通常会做以下几件事：
- 修改目标对象的属性值。
- 通知视图或其他相关部分进行更新。

完整实现（简化版）

下面是一个简化版的 Vue 3 reactive 源码，它展示了如何通过 Proxy 来实现响应式。

// reactive.js
function reactive(target) {if (typeof target !== 'object' || target === null) {return target;}const handler = {get(target, prop, receiver) {// 在这里，通常会收集依赖项// 例如，Vue 通过某种方式追踪当前访问的属性console.log(`Getting ${String(prop)}:`, target[prop]);return target[prop];},set(target, prop, value, receiver) {// 在这里，可以触发视图更新的机制console.log(`Setting ${String(prop)} to:`, value);target[prop] = value;// 返回 true，表示操作成功return true;}};return new Proxy(target, handler);
}// 使用例子
const state = reactive({count: 0,user: { name: 'John' }
});state.count = 1;  // 输出: Setting count to: 1
console.log(state.count);  // 输出: Getting count: 1