Vue浅响应式如何解决深层响应式的性能问题？适用场景有哪些？

浅响应式的概念：与深层响应式的区别

Vue 的响应式系统默认是深层响应式的——当你用 reactive 或 ref 包裹对象时，Vue 会递归地将所有嵌套属性转换为响应式代理。比如：

import { ref } from 'vue'
const obj = ref({ a: { b: 1 } })
obj.value.a.b = 2 // 触发更新（深层响应式）

这种行为很方便，但也会带来性能开销：如果对象非常大（比如包含 thousands 条数据的列表），或者内部状态由外部库管理（比如 axios 响应、第三方状态库），深层代理会浪费资源。

浅响应式（Shallow Reactivity）就是为了解决这个问题：它只跟踪顶层属性的变化，不处理嵌套对象的响应式。Vue 提供了两个 API 实现浅响应式：shallowReactive（对应 reactive）和 shallowRef（对应 ref）。

shallowReactive：只跟踪顶层属性的响应式对象

shallowReactive 是 reactive 的浅版本，它仅将对象的顶层属性转换为响应式，嵌套对象不会被代理。也就是说：

• 修改顶层属性（如 state.a）会触发更新；
• 修改嵌套属性（如 state.b.c）不会触发更新；
• 替换嵌套对象的引用（如 state.b = { new: 'data' }）会触发更新（因为 b 是顶层属性）。

示例代码

import { shallowReactive } from 'vue'

// 创建浅响应式对象
const state = shallowReactive({
  a: 1,          // 顶层属性（响应式）
  b: { c: 2 }    // 嵌套对象（非响应式）
})

// 1. 响应式变化：修改顶层属性
state.a = 2 //  触发组件更新

// 2. 非响应式变化：修改嵌套属性
state.b.c = 3 //  不会触发更新

// 3. 响应式变化：替换嵌套对象引用
state.b = { c: 3 } //  触发更新（因为 b 是顶层属性）

shallowRef：只跟踪.value变化的浅引用

shallowRef 是 ref 的浅版本，它仅跟踪 ref.value 的替换操作，不处理 value 内部的深层响应式。也就是说：

• 替换 ref.value（如 obj.value = { new: 'data' }）会触发更新；
• 修改 ref.value 的内部属性（如 obj.value.a = 2）不会触发更新。

示例代码

import { shallowRef } from 'vue'

// 创建浅引用
const obj = shallowRef({ a: 1 })

// 1. 响应式变化：替换.value
obj.value = { a: 2 } //  触发更新

// 2. 非响应式变化：修改.value内部属性
obj.value.a = 3 //  不会触发更新

注意：shallowRef 的 .value 本身是非响应式的——即使你用 reactive 包裹 value，shallowRef 也不会跟踪其内部变化。

浅响应式的应用场景：性能优化与外部状态管理

浅响应式不是“替代”深层响应式，而是补充——当你需要减少响应式开销或不希望Vue跟踪内部状态时使用：

场景1：处理大型对象

如果你的对象包含大量数据（比如表格的 thousands 条记录），但只需要跟踪顶层状态（如 isLoading、currentPage），用 shallowReactive 可以避免递归代理所有嵌套属性：

const tableState = shallowReactive({
  isLoading: true,
  currentPage: 1,
  data: [] // 大数组，内部变化无需Vue跟踪
})

场景2：外部管理的状态

如果对象的内部状态由外部库管理（比如 axios 的响应对象、Redux 的 store、第三方组件的状态），Vue 不需要跟踪其内部变化，用浅响应式更合适：

import { shallowRef } from 'vue'
import axios from 'axios'

// 用shallowRef包裹axios响应，只跟踪.value的替换
const response = shallowRef(null)

const fetchData = async () => {
  const res = await axios.get('/api/data')
  response.value = res.data //  触发更新（替换.value）
}

实践示例：用shallowReactive管理外部API状态

假设你有一个用户详情页，需要：

• 跟踪 isLoading（加载状态，顶层属性）；
• 展示用户数据（由API返回，内部变化无需Vue跟踪）。

完整组件代码

<script setup>
import { shallowReactive } from 'vue'

// 浅响应式状态：只跟踪顶层属性
const userState = shallowReactive({
  isLoading: true,
  userData: null // 由API填充，内部变化不触发Vue更新
})

// 模拟API请求
const fetchUser = async () => {
  userState.isLoading = true
  // 假设userData由外部API返回，内部状态无需Vue跟踪
  const res = await fetch('/api/user/1')
  const data = await res.json()
  userState.userData = data //  触发更新（替换顶层属性userData）
  userState.isLoading = false //  触发更新（修改顶层属性isLoading）
}

// 初始化加载
fetchUser()
</script>

<template>
  <div class="user-page">
    <!-- 加载状态（响应式） -->
    <div v-if="userState.isLoading" class="loading">加载中...</div>
    
    <!-- 用户数据（非响应式内部变化） -->
    <div v-else class="user-details">
      <h2>{{ userState.userData.name }}</h2>
      <p>年龄：{{ userState.userData.age }}</p>
      <p>邮箱：{{ userState.userData.email }}</p>
    </div>
  </div>
</template>

效果说明

• 当 isLoading 或 userData 变化时（都是顶层属性），组件会更新；
• 如果 userData 内部的 name 变化（比如 userState.userData.name = 'Bob'），组件不会更新——因为这是嵌套属性，浅响应式不跟踪。

课后Quiz：巩固浅响应式知识

问题1（多选）

以下关于 shallowReactive 的描述，正确的是？
A. shallowReactive 会使对象的所有属性（包括嵌套）响应式
B. shallowReactive 只使对象的顶层属性响应式
C. 修改 shallowReactive 对象的嵌套属性会触发更新
D. 替换 shallowReactive 对象的嵌套对象引用会触发更新

答案：B、D
解析：shallowReactive 仅处理顶层属性，所以 B 正确；替换嵌套对象的引用（如 state.b = { new: 'data' }）是顶层属性的变化，会触发更新，所以 D 正确。

问题2（单选）

当使用 shallowRef 时，以下哪种操作会触发组件更新？
A. 修改 ref.value 的内部属性（如 obj.value.a = 2）
B. 替换 ref.value（如 obj.value = { a: 2 }）
C. 修改 ref 的非 .value 属性（如 obj.a = 2）
D. 以上都不会

答案：B
解析：shallowRef 只跟踪 .value 的替换操作，所以 B 正确；A 是内部属性变化，不会触发；C 是错误操作（ref 没有 a 属性，只有 .value）。

常见报错与解决方案

报错场景1：修改shallowRef内部属性不触发更新

错误代码：

<script setup>
import { shallowRef } from 'vue'

const user = shallowRef({ name: 'Alice' })

// 修改内部属性，但页面不更新
const changeName = () => {
  user.value.name = 'Bob'
}
</script>

<template>
  <p>{{ user.value.name }}</p>
  <button @click="changeName">改名</button>
</template>

原因：shallowRef 不跟踪 .value 内部的变化。
解决方案：

1. 改用 ref（需要深层响应式时）：

   import { ref } from 'vue'
   const user = ref({ name: 'Alice' })
   

2. 手动触发更新（用 triggerRef）：

   import { shallowRef, triggerRef } from 'vue'
   const user = shallowRef({ name: 'Alice' })
   
   const changeName = () => {
     user.value.name = 'Bob'
     triggerRef(user) //  手动触发更新
   }
   

报错场景2：修改shallowReactive嵌套属性不触发更新

错误代码：

<script setup>
import { shallowReactive } from 'vue'

const state = shallowReactive({
  user: { name: 'Alice' }
})

// 修改嵌套属性，页面不更新
const changeName = () => {
  state.user.name = 'Bob'
}
</script>

<template>
  <p>{{ state.user.name }}</p>
  <button @click="changeName">改名</button>
</template>

原因：shallowReactive 不处理嵌套对象的响应式。
解决方案：

1. 改用 reactive（需要深层响应式时）：

   import { reactive } from 'vue'
   const state = reactive({ user: { name: 'Alice' } })
   

2. 替换嵌套对象引用（触发顶层属性变化）：

   const changeName = () => {
     state.user = { ...state.user, name: 'Bob' } //  替换引用，触发更新
   }
   

参考链接

• Vue 官方文档：Shallow Reactivity