Vue 3 中怎么使用 shallowReactive 创建仅根属性响应式的对象-Vue.js-PHP中文网

shallowreactive 创建仅根属性响应式的对象，嵌套对象不被递归代理；适用于深层数据无需响应式、第三方库集成或性能敏感场景，如大型列表或只依赖顶层字段的 ui 更新。

vue 3 中怎么使用 shallowreactive 创建仅根属性响应式的对象

shallowReactive 是 Vue 3 提供的一个响应式 API，它只让对象的**根属性**保持响应式，而**嵌套对象或数组本身不会被递归转为响应式**。适合用于性能敏感场景，比如大型列表、第三方库返回的对象，或你明确知道深层结构不需要响应式更新的情况。

什么时候该用 shallowReactive？

当你有以下需求时，它比 reactive 更合适：

对象层级很深，但只有顶层字段（如 id、name、status）需要响应式更新
嵌套数据来自外部（如后端 JSON、Map/WeakMap 实例、class 实例），不希望 Vue 深度代理干扰其行为
频繁修改深层属性，但 UI 只依赖顶层状态，避免不必要的依赖追踪开销

基本用法：创建仅根响应式的对象

直接传入一个普通对象即可：

import { shallowReactive } from 'vue'

const state = shallowReactive({
  count: 0,
  user: {
    name: 'Alice',
    profile: { avatar: '/a.png' }
  },
  items: [{ id: 1, done: false }]
})

此时：

Ainative React Sdk

使用 @ainative/react-sdk 为 React 应用添加 AI 聊天和积分。适用于 (1) 安装 @ainative/react-sdk，(2) 使用 useChat hook 实现聊天完成。

下载

state.count 改变会触发视图更新 ✅
state.user 被整体替换（如 state.user = { name: 'Bob' }）会响应 ✅
state.user.name = 'Bob' 不会触发更新 ❌（因为 user 本身不是 reactive）
state.items[0].done = true 同样不会响应 ❌

如何安全地更新嵌套属性？

既然深层不可响应，又想更新并触发依赖，有几种实用方式：

用 shallowRef 包裹嵌套部分：对特定子对象单独控制响应性
手动触发更新：通过 triggerRef 强制通知依赖（需配合 shallowRef）
替换整个根属性：例如 state.user = { ...state.user, name: 'Bob' } —— 这是最常用且推荐的方式

示例：

import { shallowReactive, triggerRef, shallowRef } from 'vue'

const state = shallowReactive({
  title: 'Hello',
  // 用 shallowRef 管理需要局部响应的嵌套对象
  config: shallowRef({ theme: 'dark', lang: 'zh' })
})

// 更新 config 的某个字段，并主动通知
state.config.value.lang = 'en'
triggerRef(state.config) // 触发依赖更新