Vue3 源码解析：揭秘 reactive 创建响应式对象的奥秘

2023-09-26 04:41:12

引言

在 Vue3 中，reactive 函数是用于创建响应式对象的。响应式对象是指当其属性发生变化时，能够自动触发视图更新的对象。这使得 Vue3 能够轻松实现数据的双向绑定，并极大地简化了前端开发的工作。

reactive 函数的源码实现

export function reactive(target) {
  // 如果 target 不是对象，则直接返回
  if (!isObject(target)) {
    return target;
  }

  // 如果 target 已经是响应式对象，则直接返回
  if (isReactive(target)) {
    return target;
  }

  // 创建响应式对象
  const proxy = createReactiveObject(target);

  // 返回响应式对象
  return proxy;
}

从上面的代码可以看出，reactive 函数是通过调用 createReactiveObject 函数来创建响应式对象的。createReactiveObject 函数的源码实现如下：

function createReactiveObject(target) {
  // 创建一个代理对象
  const proxy = new Proxy(target, {
    // 拦截对象的属性获取操作
    get(target, key, receiver) {
      // 收集依赖
      track(target, key);

      // 获取属性值
      const value = Reflect.get(target, key, receiver);

      // 如果属性值是对象，则将其转换为响应式对象
      if (isObject(value)) {
        return reactive(value);
      }

      // 返回属性值
      return value;
    },

    // 拦截对象的属性设置操作
    set(target, key, value, receiver) {
      // 设置属性值
      const oldValue = Reflect.get(target, key, receiver);
      Reflect.set(target, key, value, receiver);

      // 触发更新
      trigger(target, key, oldValue, value);

      // 返回 true
      return true;
    }
  });

  // 返回代理对象
  return proxy;
}