浅层响应式：【Vue3】的【shallowReactive】详解

在 Vue 3 中，响应式系统得到了显著的改进，引入了 shallowReactive 和 shallowRef 等新特性。这些新特性旨在提供更细粒度的响应式控制，帮助开发者更好地管理状态。在这篇文章中，我们将深入探讨 shallowReactive 的使用和原理。

什么是 `shallowReactive`？

shallowReactive 是 Vue 3 中的一种响应式 API，它用于创建一个浅响应式对象。这意味着：

一层响应式：shallowReactive 只会对对象的第一层属性进行响应式转换，而不会对嵌套的对象进行响应式处理。
性能优化：当我们知道某些嵌套属性不会被频繁修改或不会被直接访问时，使用 shallowReactive 可以减少不必要的性能开销。

基本用法

使用 shallowReactive 非常简单。首先，我们需要导入它：

import { shallowReactive } from 'vue';

然后，我们可以创建一个浅响应式对象：

const state = shallowReactive({
  user: {
    name: 'Alice',
    age: 30
  },
  loggedIn: false
});

在上面的例子中，state 是一个浅响应式对象。对 state.loggedIn 的变化会被响应式系统追踪，但对 state.user 的变化不会。

示例：如何使用 `shallowReactive`

让我们看一个更具体的例子

import { shallowReactive, watch } from 'vue';

const state = shallowReactive({
  user: {
    name: 'Alice',
    age: 30
  },
  loggedIn: false
});

// 监视 loggedIn 状态的变化
watch(
  () => state.loggedIn,
  (newValue) => {
    console.log(`登录状态变化: ${newValue}`);
  }
);

// 修改 loggedIn，触发 watcher
state.loggedIn = true; // 输出: 登录状态变化: true

// 尝试修改 user 的属性，不会触发响应式
state.user.age = 31; // 不会有任何输出

使用场景

shallowReactive 的适用场景包括：

性能优化：当你知道嵌套对象不会被频繁修改时，使用 shallowReactive 可以提高性能。
避免深层嵌套的复杂性：有时我们只关心对象的第一层属性，使用 shallowReactive 可以避免不必要的深层嵌套复杂性。
不需要深度追踪的状态：在某些情况下，状态可能只是简单的标志位，不需要深入追踪。

深度对比：`reactive` vs `shallowReactive`

特性	`reactive`	`shallowReactive`
响应式深度	深度响应式	仅第一层响应式
性能	更高的开销	更低的开销
用途	适用于复杂嵌套对象	适用于简单状态管理

注意事项

只针对第一层：shallowReactive 不会为嵌套对象或数组提供响应式。如果需要在嵌套对象上实现响应式，你可以使用 reactive。
不兼容某些 API：在使用 Vue 的其他功能（如 v-model）时，需要注意 shallowReactive 可能不兼容某些特性。

浅层响应式：【Vue3】 的 【shallowReactive】 详解

什么是 shallowReactive？