Vue 3源码极客之：`Vue`的`shallowReactive`：如何只对顶层属性进行响应式代理。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

嘿，大家好！欢迎来到今天的Vue 3源码极客系列讲座。今天我们要聊的是shallowReactive，一个Vue 3里相对低调，但关键时刻能发挥大作用的API。

咱们先来热个身，想想响应式数据的基本概念。在Vue的世界里，数据一旦变成响应式，任何对它的修改都会触发视图的更新。但如果你的数据结构非常复杂，嵌套很深，全部都做响应式代理可能就有点杀鸡用牛刀了，甚至会影响性能。

这时候，shallowReactive就闪亮登场了。它的特点是：只对对象的顶层属性进行响应式代理，而深层嵌套的对象保持原样。

一、 reactive vs. shallowReactive：深入浅出

为了更好地理解shallowReactive，咱们先复习一下reactive。reactive会递归地将一个对象的所有属性都转换成响应式。

import { reactive } from 'vue';

const data = reactive({
  name: '张三',
  age: 30,
  address: {
    city: '北京',
    street: '长安街'
  }
});

console.log('原始数据:', data);

data.name = '李四'; // 触发响应式更新
data.address.city = '上海'; // 同样触发响应式更新

在这个例子中，data和data.address都被转换为响应式对象。修改任何一个属性都会触发视图更新。

现在，我们来看看shallowReactive：

import { shallowReactive } from 'vue';

const shallowData = shallowReactive({
  name: '张三',
  age: 30,
  address: {
    city: '北京',
    street: '长安街'
  }
});

console.log('原始数据:', shallowData);

shallowData.name = '李四'; // 触发响应式更新
shallowData.address.city = '上海'; // 不会触发响应式更新

console.log('shallowData.address', shallowData.address);

这里，只有shallowData的顶层属性（name、age、address）会被转换为响应式。而shallowData.address这个对象本身仍然是普通的JavaScript对象，它的属性变化不会触发响应式更新。

为了更清晰地对比，我们用表格来总结一下：

特性	`reactive`	`shallowReactive`
响应式深度	递归地将所有属性转换为响应式	仅对顶层属性进行响应式代理
性能	性能开销相对较大，尤其是在处理大型对象时	性能开销较小，只代理顶层属性
使用场景	需要深度响应式的场景	只需要顶层响应式，且深层数据不经常变动的场景

二、 shallowReactive 的源码剖析：窥探内部机制

想要真正理解shallowReactive，最好的方法就是深入到Vue 3的源码中。虽然我们不可能完全展开所有细节，但可以抓住核心部分。

shallowReactive的核心实现依赖于JavaScript的Proxy。Proxy允许我们拦截对象的操作，比如读取、写入、删除属性等。

简化版的shallowReactive大概是这样的：

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

  const existingProxy = reactiveMap.get(target);
  if (existingProxy) {
    return existingProxy; // 如果已经代理过，直接返回
  }

  const proxy = new Proxy(target, {
    get(target, key, receiver) {
      const res = Reflect.get(target, key, receiver);
      track(target, key); // 追踪依赖
      return res;
    },
    set(target, key, value, receiver) {
      const oldValue = target[key];
      const result = Reflect.set(target, key, value, receiver);
      if (result && oldValue !== value) {
        trigger(target, key); // 触发更新
      }
      return result;
    },
    deleteProperty(target, key) {
      const result = Reflect.deleteProperty(target, key);
      if (result) {
        trigger(target, key); // 触发更新
      }
      return result;
    }
  });

  reactiveMap.set(target, proxy); // 缓存proxy对象
  return proxy;
}

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

类型检查： 确保传入的target是一个对象。如果不是，直接返回。
缓存： 使用一个reactiveMap来缓存已经代理过的对象。如果已经代理过，直接返回缓存的proxy对象。这避免了重复代理。
创建Proxy： 创建一个Proxy对象，拦截get、set和deleteProperty操作。
- get：在读取属性时，使用track函数追踪依赖。这是Vue响应式系统的核心机制，它会记录当前正在执行的副作用函数（比如组件的渲染函数）依赖了哪些属性。
- set：在设置属性时，使用trigger函数触发更新。这会通知所有依赖该属性的副作用函数重新执行。
- deleteProperty：在删除属性时，同样使用trigger函数触发更新。
缓存Proxy： 将创建的Proxy对象缓存到reactiveMap中。

重点： 你会发现，在get方法中，我们仅仅是简单地返回了属性值 const res = Reflect.get(target, key, receiver);，并没有递归地调用reactive或者shallowReactive。这就是shallowReactive只做浅层代理的关键所在。

三、 shallowReactive 的应用场景：用对地方才高效

那么，在哪些情况下，我们应该使用shallowReactive呢？

大型数据结构： 当你的数据结构非常庞大，并且只有顶层属性需要响应式时，shallowReactive可以显著提升性能。例如，一个包含大量数据的配置对象，只有少数几个顶层属性需要动态更新。

import { shallowReactive } from 'vue';

const config = shallowReactive({
  appName: 'My App',
  version: '1.0.0',
  theme: {
    primaryColor: '#42b983',
    secondaryColor: '#35495e'
  },
  apiEndpoints: {
    users: '/api/users',
    products: '/api/products'
  }
});

// 只有appName和version需要响应式更新
config.appName = 'New App Name'; // 触发更新
config.theme.primaryColor = '#ff0000'; // 不触发更新

外部数据源： 当你从外部（例如，第三方库）获取数据，而这些数据本身不需要响应式时，可以使用shallowReactive。例如，从localStorage读取的数据。

import { shallowReactive } from 'vue';

const userData = shallowReactive(JSON.parse(localStorage.getItem('user') || '{}'));

// 假设userData.settings不需要响应式
userData.name = 'Updated Name'; // 触发更新
userData.settings = { darkMode: true }; // 触发更新
userData.settings.darkMode = false; // 不触发更新

性能优化： 在某些情况下，即使深层数据需要响应式，但如果深层数据的更新频率很低，并且对性能影响很大，可以考虑使用shallowReactive来优化性能。不过，这需要仔细权衡响应式和性能之间的trade-off。

四、注意事项：避开雷区

在使用shallowReactive时，有一些需要特别注意的地方：

深层数据的突变： 如果深层数据发生了突变（例如，直接修改数组的元素），即使shallowReactive没有代理这些深层数据，Vue仍然可能会检测到变化并触发更新。这是因为Vue会尝试对所有的数据进行脏检查。因此，最好的做法是避免直接修改深层数据，而是通过替换整个对象来实现更新。
```
import { shallowReactive } from 'vue';

const data = shallowReactive({
  items: [1, 2, 3]
});

// 错误的做法：直接修改数组元素
data.items[0] = 10; // 可能触发更新，也可能不触发，行为不稳定

// 正确的做法：替换整个数组
data.items = [10, 2, 3]; // 触发更新
```
与reactive的混合使用： 避免将shallowReactive和reactive混合使用，这可能会导致意外的行为。例如，如果一个对象的一部分使用reactive代理，另一部分使用shallowReactive代理，那么响应式行为可能会变得难以预测。
类型推导的坑： typescript中，如果使用shallowReactive，类型推导可能会有问题。你需要手动指定类型，确保类型系统能够正确理解数据的结构。

import { shallowReactive } from 'vue';

interface User {
  name: string;
  age: number;
  address: {
    city: string;
    street: string;
  };
}

const user: User = shallowReactive({
  name: '张三',
  age: 30,
  address: {
    city: '北京',
    street: '长安街'
  }
});

user.name = '李四'; // 正确，触发更新
// user.address.city = '上海'; // 错误，类型检查无法通过，因为address不是响应式的

五、总结：灵活运用，提升效率

shallowReactive是Vue 3中一个非常有用的API，它可以帮助我们更精细地控制响应式行为，从而提升性能。但是，它也有一些需要注意的地方。只有充分理解了shallowReactive的原理和使用场景，才能在实际开发中灵活运用，写出更高效、更稳定的Vue应用。

希望今天的讲座对你有所帮助。记住，掌握工具的关键在于理解其背后的原理和适用场景。下次再见！

发表回复 取消回复

发表回复取消回复