VUE响应式基础-ref()、reactive()

reactive‌：使用 Proxy 代理对象。
‌ref‌：使用一个包含 _value 属性的普通对象（RefImpl），通过 ES6 Class 的 get/set 访问器手动调用 track 和 trigger，‌不使用‌ Object.defineProperty，也‌不‌对 Ref 本身套 Proxy。
‌依赖管理‌：使用 WeakMap 存储依赖关系，支持嵌套对象和自动解包。
为了更直观地理解 ref 和 reactive 的底层运行逻辑，这里提供一份‌简化版的手写实现代码‌。

🚀 简易响应式系统完整实现

/**
 * ==========================================
 * 1. 依赖收集与触发系统 (Dependency System)
 * ==========================================
 */

// 全局状态：存储当前正在执行的副作用函数
let activeEffect = null;

// 依赖映射表：Target -> Key -> Set<Effects>
// 使用 WeakMap 防止内存泄漏（当对象被垃圾回收时，依赖自动清除）
const targetMap = new WeakMap();

/**
 * 依赖收集：当读取数据时，将当前 effect 记录到依赖表中
 * @param {Object} target - 目标对象
 * @param {String|Symbol} key - 属性键
 */
function track(target, key) {
  if (!activeEffect) return; // 没有正在运行的 effect，无需收集

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

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

  // 避免重复添加同一个 effect
  if (!dep.has(activeEffect)) {
    dep.add(activeEffect);
  }
}

/**
 * 触发更新：当数据修改时，执行所有依赖该数据的 effect
 * @param {Object} target - 目标对象
 * @param {String|Symbol} key - 属性键
 */
function trigger(target, key) {
  const depsMap = targetMap.get(target);
  if (!depsMap) return;

  const effects = depsMap.get(key);
  if (effects) {
    // 创建副本执行，防止 effect 内部修改数据导致无限循环或集合修改错误
    new Set(effects).forEach(effect => effect());
  }
}

/**
 * 注册副作用函数
 * @param {Function} fn - 副作用函数
 */
function effect(fn) {
  const wrappedEffect = () => {
    try {
      activeEffect = wrappedEffect; // 设置当前激活的 effect
      return fn(); // 执行函数，期间会触发 getter 从而调用 track
    } finally {
      activeEffect = null; // 执行完毕，重置
    }
  };
  wrappedEffect(); // 立即执行一次以收集初始依赖
  return wrappedEffect;
}

/**
 * ==========================================
 * 2. Reactive 实现 (基于 Proxy)
 * ==========================================
 */

/**
 * 将对象转换为响应式代理
 * @param {Object} obj 
 * @returns {Proxy}
 */
function reactive(obj) {
  // 仅处理非空对象
  if (typeof obj !== 'object' || obj === null) {
    return obj;
  }

  // 如果已经是响应式对象，直接返回（避免重复代理）
  if (obj.__v_isReactive) return obj;

  const handler = {
    get(target, key, receiver) {
      const res = Reflect.get(target, key, receiver);
      
      // 【核心】收集依赖
      track(target, key);

      // 【核心】深层响应：如果获取的值是对象，递归转为 reactive
      // 注意：这里只在访问时才转换，属于懒代理
      if (typeof res === 'object' && res !== null) {
        return reactive(res);
      }
      
      return res;
    },
    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 hadKey = key in target;
      const result = Reflect.deleteProperty(target, key);
      if (hadKey) {
        trigger(target, key);
      }
      return result;
    }
  };

  const proxy = new Proxy(obj, handler);
  
  // 标记为响应式对象，用于判断
  Object.defineProperty(proxy, '__v_isReactive', {
    value: true,
    enumerable: false,
    writable: false
  });
  
  return proxy;
}

/**
 * ==========================================
 * 3. Ref 实现 (基于 Class Getter/Setter)
 * ==========================================
 */

/**
 * 辅助函数：将值转换为响应式（如果是对象则用 reactive，否则保持原样）
 */
function convert(val) {
  return typeof val === 'object' && val !== null ? reactive(val) : val;
}

/**
 * Ref 类：包装基础类型或对象
 * Vue 3 中 ref 并不使用 defineProperty，也不对 Ref 实例本身做 Proxy
 * 而是通过类的 get/set 访问器手动调用 track/trigger
 */
class RefImpl {
  constructor(rawValue) {
    this._rawValue = rawValue; // 保存原始值
    this._value = convert(rawValue); // 保存转换后的值（对象会被转为 reactive）
    this.__v_isRef = true; // 标记为 Ref
  }

  get value() {
    // 【核心】读取 .value 时，收集对 'value' 这个 key 的依赖
    // 注意：这里的 target 是 RefImpl 实例本身
    track(this, 'value');
    return this._value;
  }

  set value(newVal) {
    if (newVal !== this._rawValue) {
      this._rawValue = newVal;
      this._value = convert(newVal);
      // 【核心】修改 .value 时，触发对 'value' 这个 key 的更新
      trigger(this, 'value');
    }
  }
}

/**
 * 创建 ref
 * @param {*} value 
 * @returns {RefImpl}
 */
function ref(value) {
  return new RefImpl(value);
}

/**
 * 判断是否为 ref
 */
function isRef(r) {
  return !!(r && r.__v_isRef);
}

/**
 * 解包 ref：在模板或 reactive 中自动解包
 */
function unref(refObj) {
  return isRef(refObj) ? refObj.value : refObj;
}

💡 代码运行演示与解析

1. 测试 reactive (对象代理)

const state = reactive({ count: 0, user: { name: 'Alice' } });

effect(() => {
  console.log(`[Reactive Effect] Count is: ${state.count}, Name is: ${state.user.name}`);
});
// 输出: [Reactive Effect] Count is: 0, Name is: Alice

state.count++; 
// 输出: [Reactive Effect] Count is: 1, Name is: Alice

state.user.name = 'Bob';
// 输出: [Reactive Effect] Count is: 1, Name is: Bob

2. 测试 ref (基础类型包装)

const countRef = ref(10);

effect(() => {
  console.log(`[Ref Effect] CountRef is: ${countRef.value}`);
});
// 输出: [Ref Effect] CountRef is: 10

countRef.value = 20;
// 输出: [Ref Effect] CountRef is: 20

3. 测试 ref 包裹对象 (自动转换)

const userRef = ref({ name: 'Vue' });

effect(() => {
  // 注意：userRef 是 RefImpl 实例，访问 .value 拿到的是 reactive 代理对象
  // 所以 userRef.value.name 能触发响应式
  console.log(`[Ref Object Effect] User is: ${userRef.value.name}`);
});
// 输出: [Ref Object Effect] User is: Vue

userRef.value.name = 'React';
// 输出: [Ref Object Effect] User is: React

// 整体替换 ref 的对象
userRef.value = { name: 'Svelte' };
// 输出: [Ref Object Effect] User is: Svelte

🔑 核心差异总结（通过代码视角）

在 Vue 3 开发中，选择 ref 还是 reactive 主要取决于‌数据类型‌、‌代码维护习惯‌以及‌业务场景的复杂度‌。
虽然两者都能实现响应式，但为了代码的可读性、一致性和避免常见的“响应式丢失”坑点，业界目前更倾向于‌优先使用 ref‌。以下是具体的选型建议和最佳实践：
🏆 核心结论：优先使用 ref
Vue 官方文档及社区主流观点建议：‌在大多数场景下，统一使用 ref 是更合理的选择。‌
‌理由‌：ref 语法统一（无论基础类型还是对象都用 .value），避免了在 ref 和 reactive 之间切换思维模式的认知负担，且彻底规避了 reactive 解构丢失响应式、整体替换失效等痛点。

📊 详细选型指南

1. 必须/推荐使用 ref 的场景

2. 可以考虑使用 reactive 的场景

⚠️ ‌注意‌：如果使用 reactive，请务必配合 toRefs 进行解构，否则解构后的变量将失去响应式。

const state = reactive({ name: 'Vue', age: 3 })
// ❌ 错误：name 失去响应式
const { name } = state 
// ✅ 正确：保留响应式
const { name, age } = toRefs(state)

💡 避坑对照表

🚀 企业级落地最佳实践建议

‌默认策略‌：项目中‌默认全部使用 ref‌。

优点：心智模型统一，不用判断类型；解构安全；替换安全；DOM 引用方便。
缺点：脚本中需要频繁写 .value（可通过 IDE 插件或 ESLint 规则辅助提示）。
‌例外策略‌：仅在以下情况使用 reactive：

你正在处理一个巨大的、深层嵌套的表单对象，且团队约定好‌绝不解构‌该对象，始终通过 form.field.subField 方式访问。
你需要将响应式对象传递给一个不接受 Ref 包装器的遗留代码或第三方库。
‌工具函数搭配‌：

使用 unref() 或 toValue() (Vue 3.3+) 来统一处理可能是 ref 也可能是普通值的参数。
使用 isRef() 和 isReactive() 进行调试或类型守卫。
‌总结一句话‌：除非你有明确的理由（如避免大量 .value 书写且保证不解构），否则‌无脑选 ref‌ 是最安全、最现代、最易维护的选择。