本文将为您详细介绍 Vue 3 中的浅层响应式——shallowReactive 的定义、使用方法以及常见问题的解决方案。通过学习本文，您将能够更好地掌握 Vue 3 中的响应式原理，提高 Vue 开发的效率。

image-20230315120359116

shallowReactive 是什么

在 Vue 3 中，我们可以使用 shallowReactive 来创建一个响应式对象，与 reactive 不同， shallowReactive 会忽略对象中的嵌套属性的响应式更新，只有对象的直接属性发生变化时才会触发更新。

shallowReactive 的使用场景通常是，当我们需要创建一个响应式对象，但是不希望其嵌套属性也响应式更新时，可以使用该 API。

shallowReactive 用法例子

让我们来看一个简单的使用 shallowReactive 的例子：

import { shallowReactive } from "vue";

const state = shallowReactive({
  name: "小明",
  address: {
    city: "上海",
    state: "上海",
  },
});

// 修改state对象的直接属性
state.name = "小红"; // 触发响应式更新

// 修改state对象的嵌套属性
state.address.city = "北京"; // 不会触发响应式更新

在上面的代码中，我们使用 shallowReactive 创建了一个响应式对象 state，其中包含一个直接属性 name 和一个嵌套属性 address。当我们修改 state.name 属性时，由于该属性是直接属性，所以会触发响应式更新；当我们修改 state.address.city 属性时，由于该属性是嵌套属性，所以不会触发响应式更新。

除了上述例子中的直接属性和嵌套属性的修改外，我们还可以使用 Vue.set 方法来给对象添加新属性。当我们使用 Vue.set 方法添加新属性时，该属性会被视为直接属性，因此会触发响应式更新。让我们来看一个示例：

import { shallowReactive } from "vue";

const state = shallowReactive({
  name: "小明",
  address: {
    city: "上海",
    state: "上海",
  },
});

// 添加新属性
Vue.set(state, "age", 18); // 触发响应式更新

在上面的代码中，我们使用 Vue.set 方法向 state 对象添加了一个新属性 age，由于该属性是直接属性，所以会触发响应式更新。

需要注意的是， shallowReactive 只会在修改对象的直接属性时触发响应式更新，如果我们想要响应式更新嵌套属性，需要使用 reactive 或者 ref 来创建响应式对象。

综上所述， shallowReactive 是 Vue 3 中的一个 API，用于创建一个响应式对象，该对象仅仅响应其直接属性的变化，而不会响应其属性所包含的对象的变化。适用于不需要对嵌套属性进行响