分析 Vue 3 源码中 `readonly` 函数如何实现只读的响应式对象，以及 `shallowReactive` 和 `shallowRef` 的实现原理和应用场景。

各位靓仔靓女，晚上好！我是今晚的讲师，咱们今天来聊聊 Vue 3 响应式系统里几个挺有意思的函数：readonly、shallowReactive 和 shallowRef。别看名字有点长，其实理解了它们背后的原理，用起来就会感觉 "so easy"！

开场白：响应式系统的 "只读模式" 和 "浅尝辄止"

在 Vue 3 的世界里，响应式系统是基石，它让我们的数据变化能够驱动视图更新。但是，有时候我们并不希望所有的数据都具有响应性，或者希望某些数据只能读取不能修改。这时候，readonly、shallowReactive 和 shallowRef 就派上用场了。

你可以把 readonly 想象成给你的数据对象加了一把锁，防止别人乱改你的数据。而 shallowReactive 和 shallowRef 就像是“浅水区”，只对第一层的数据做响应式处理，深层的数据就放飞自我了。

第一幕：readonly——“我的地盘我做主，只能看不能动”

readonly 函数的作用很简单：接收一个对象，返回一个只读的响应式代理对象。任何试图修改这个代理对象的操作都会触发一个警告。

实现原理：拦截 set 操作

readonly 的核心在于使用 Proxy 对象，拦截 set 操作，让任何尝试修改属性值的行为都失效。

咱们先来看一段简化版的 readonly 实现代码：

function readonly(target) {
  return new Proxy(target, {
    set(target, key, value, receiver) {
      console.warn(`Set operation on key "${String(key)}" failed: target is readonly.`, target);
      return true; // 表示 set 操作成功，但实际上没有修改
    },
    deleteProperty(target, key) {
      console.warn(`Delete operation on key "${String(key)}" failed: target is readonly.`, target);
      return true; // 表示 delete 操作成功，但实际上没有删除
    }
  });
}

// 示例
const original = { name: '张三', age: 18 };
const readonlyObj = readonly(original);

readonlyObj.name = '李四'; // 控制台会输出警告
console.log(readonlyObj.name); // 仍然是 "张三"

这段代码展示了 readonly 的最核心逻辑：拦截 set 和 deleteProperty 操作，发出警告，并且阻止修改。

当然，真正的 Vue 3 源码实现要复杂一些，它会处理各种边界情况，比如深层嵌套的对象，以及和 reactive 的配合。但是，核心思想是不变的：通过 Proxy 拦截写操作。

源码剖析 (简化版)：

Vue 3 内部的 readonly 实现会用到一个 mutableToReadonly 的 Map 对象，用于缓存已经创建过的 readonly 代理。这样可以避免重复创建代理，提高性能。

const mutableToReadonly = new WeakMap();

function readonly(target) {
  if (typeof target !== 'object' || target === null) {
    return target; // 不是对象，直接返回
  }

  if (mutableToReadonly.has(target)) {
    return mutableToReadonly.get(target); // 缓存命中，直接返回
  }

  const existingProxy = mutableToReadonly.get(target);
  if (existingProxy) {
    return existingProxy; // 已经有代理，直接返回
  }

  const readonlyProxy = new Proxy(target, {
    get(target, key, receiver) {
      const res = Reflect.get(target, key, receiver);
      // 如果是对象，递归调用 readonly
      return typeof res === 'object' && res !== null ? readonly(res) : res;
    },
    set(target, key, value, receiver) {
      console.warn(`Set operation on key "${String(key)}" failed: target is readonly.`, target);
      return true;
    },
    deleteProperty(target, key) {
      console.warn(`Delete operation on key "${String(key)}" failed: target is readonly.`, target);
      return true;
    }
  });

  mutableToReadonly.set(target, readonlyProxy); // 缓存代理
  return readonlyProxy;
}

这段代码做了以下几件事：

类型检查： 确保传入的是一个对象。
缓存： 使用 WeakMap 缓存已经创建过的 readonly 代理，避免重复创建。
递归处理： 在 get 拦截器中，如果属性值是对象，递归调用 readonly，实现深层只读。
拦截写操作： 在 set 和 deleteProperty 拦截器中，发出警告，阻止修改。

应用场景：

保护数据状态： 防止组件意外修改 props 传递的数据，保持数据流的可预测性。
创建不可变数据： 在某些场景下，我们需要确保数据是不可变的，比如在 Redux 中。
优化性能： 对于静态数据，使用 readonly 可以避免不必要的依赖追踪。

第二幕：shallowReactive——“浅尝辄止的响应式”

shallowReactive 和 reactive 类似，都是创建响应式对象。但区别在于，shallowReactive 只会对对象的第一层属性进行响应式处理，如果属性值是对象，那么这个对象不会被转换为响应式对象。

实现原理：只对第一层属性进行响应式处理

shallowReactive 的实现和 reactive 类似，都是使用 Proxy 对象拦截 get、set 和 deleteProperty 操作。但是，在 get 拦截器中，不会递归调用 reactive 对属性值进行深度响应式处理。

简化版代码如下：

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

  return new Proxy(target, {
    get(target, key, receiver) {
      const res = Reflect.get(target, key, receiver);
      return res; // 注意这里没有递归调用 shallowReactive
    },
    set(target, key, value, receiver) {
      const oldValue = Reflect.get(target, key, receiver);
      const result = Reflect.set(target, key, value, receiver);
      if (oldValue !== value) {
        // 触发更新
        console.log(`属性 ${key} 被修改了`);
      }
      return result;
    },
    deleteProperty(target, key) {
      const result = Reflect.deleteProperty(target, key);
      if (result) {
        // 触发更新
        console.log(`属性 ${key} 被删除了`);
      }
      return result;
    }
  });
}

// 示例
const obj = {
  name: '张三',
  address: {
    city: '北京'
  }
};

const shallowObj = shallowReactive(obj);

shallowObj.name = '李四'; // 会触发更新
shallowObj.address.city = '上海'; // 不会触发更新

在这个例子中，修改 shallowObj.name 会触发更新，因为 name 是第一层属性。但是，修改 shallowObj.address.city 不会触发更新，因为 address 是一个对象，并且没有被转换为响应式对象。

源码剖析 (简化版)：

Vue 3 内部的 shallowReactive 实现同样会用到缓存，避免重复创建代理。

const shallowReactiveMap = new WeakMap();

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

  if (shallowReactiveMap.has(target)) {
    return shallowReactiveMap.get(target);
  }

  const existingProxy = shallowReactiveMap.get(target);
    if(existingProxy){
        return existingProxy
    }

  const proxy = new Proxy(target, {
    get(target, key, receiver) {
      const res = Reflect.get(target, key, receiver);
      return res; // 注意这里没有递归调用 shallowReactive
    },
    set(target, key, value, receiver) {
      const oldValue = Reflect.get(target, key, receiver);
      const result = Reflect.set(target, key, value, receiver);
      if (oldValue !== value) {
        // 触发更新 (这里省略了触发更新的具体实现)
        console.log(`属性 ${key} 被修改了`);
      }
      return result;
    },
    deleteProperty(target, key) {
      const result = Reflect.deleteProperty(target, key);
      if (result) {
        // 触发更新 (这里省略了触发更新的具体实现)
        console.log(`属性 ${key} 被删除了`);
      }
      return result;
    }
  });

  shallowReactiveMap.set(target, proxy);
  return proxy;
}

这段代码和 readonly 的实现类似，只是在 get 拦截器中没有递归调用 shallowReactive。

应用场景：

处理大型数据结构： 如果你的数据结构非常庞大，只有第一层属性需要响应式，使用 shallowReactive 可以提高性能。
避免不必要的依赖追踪： 如果你知道某些属性永远不会被修改，使用 shallowReactive 可以避免不必要的依赖追踪。
与第三方库集成： 某些第三方库可能返回非响应式对象，可以使用 shallowReactive 将其转换为响应式对象，但只对第一层属性生效。

第三幕：shallowRef——“Ref 的浅水版”

shallowRef 和 ref 类似，都是创建一个包含任意值的响应式 "ref" 对象。但区别在于，shallowRef 只会对 .value 属性进行响应式处理，如果 .value 是一个对象，那么这个对象不会被转换为响应式对象。

实现原理：只对 .value 属性进行响应式处理

shallowRef 的实现比 shallowReactive 简单一些，因为它只需要拦截 .value 属性的 get 和 set 操作。

简化版代码如下：

function shallowRef(value) {
  return {
    get value() {
      return value;
    },
    set value(newValue) {
      if (value !== newValue) {
        value = newValue;
        // 触发更新
        console.log('value 被修改了');
      }
    }
  };
}

// 示例
const obj = { name: '张三' };
const shallowRefObj = shallowRef(obj);

shallowRefObj.value = { name: '李四' }; // 会触发更新
shallowRefObj.value.name = '王五'; // 不会触发更新

在这个例子中，修改 shallowRefObj.value 会触发更新，因为 .value 属性被修改了。但是，修改 shallowRefObj.value.name 不会触发更新，因为 shallowRefObj.value 只是一个普通对象，没有被转换为响应式对象。

源码剖析 (简化版)：

Vue 3 内部的 shallowRef 实现会用到 track 和 trigger 函数，用于依赖追踪和触发更新。

function shallowRef(value) {
  return {
    get value() {
      track(this, 'value'); // 追踪依赖
      return value;
    },
    set value(newValue) {
      if (value !== newValue) {
        value = newValue;
        trigger(this, 'value'); // 触发更新
      }
    }
  };
}

// track 和 trigger 函数的简化实现 (实际源码更复杂)
const targetMap = new WeakMap();

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

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

  // 这里需要获取当前激活的 effect 函数 (这里省略了获取 effect 函数的具体实现)
  const activeEffect = null; // 假设当前没有激活的 effect 函数

  if (activeEffect) {
    dep.add(activeEffect);
  }
}

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

  const dep = depsMap.get(key);
  if (dep) {
    dep.forEach(effect => {
      // 执行 effect 函数 (这里省略了执行 effect 函数的具体实现)
      console.log('执行 effect 函数');
    });
  }
}

这段代码做了以下几件事：

track 函数： 用于追踪依赖，当访问 .value 属性时，会将当前激活的 effect 函数添加到依赖集合中。
trigger 函数： 用于触发更新，当修改 .value 属性时，会执行依赖集合中的所有 effect 函数。

应用场景：

处理大型对象： 如果你的 ref 对象包含一个大型对象，只有 .value 属性需要响应式，使用 shallowRef 可以提高性能。
与第三方库集成： 某些第三方库可能返回非响应式对象，可以使用 shallowRef 将其包装成响应式 ref 对象，但只对 .value 属性生效。
状态管理： 在某些简单的状态管理场景中，可以使用 shallowRef 来存储状态，只对 .value 属性进行响应式处理。

总结：

为了方便大家记忆和理解，我把这三个函数的主要特点整理成表格：

函数	作用	响应式深度	适用场景
`readonly`	创建只读的响应式代理对象，任何修改操作都会触发警告。	深	保护数据状态，创建不可变数据，优化性能。
`shallowReactive`	创建浅层响应式对象，只对第一层属性进行响应式处理。	浅	处理大型数据结构，避免不必要的依赖追踪，与第三方库集成。
`shallowRef`	创建浅层响应式 `ref` 对象，只对 `.value` 属性进行响应式处理。	浅	处理大型对象，与第三方库集成，简单的状态管理。

结束语：

理解 readonly、shallowReactive 和 shallowRef 的原理，可以帮助我们更好地控制 Vue 3 响应式系统的行为，提高性能，并编写更健壮的代码。希望今天的分享对大家有所帮助！谢谢大家！

发表回复 取消回复

发表回复取消回复