vue3 reactive响应式实现源码

news2024/11/26 12:20:32

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