vue 3 的 reactive 对数组和嵌套对象是深层响应的，但需通过响应式方法（如 push、splice）修改数组，且嵌套属性必须已存在才能触发更新；直接索引赋值、重赋整个引用会丢失响应性，推荐原地修改或改用 ref.value。
Vue 3 的 reactive 对数组和嵌套对象本身是深层响应的，但“深层”不等于“无条件响应”——关键在于你修改数据的方式是否落在 Vue 的响应式追踪范围内。
数组更新必须用响应式方法
reactive 创建的数组能自动追踪 push、pop、shift、unshift、splice、sort、reverse 这些内置方法的调用。但以下操作不会触发更新：
- 直接通过索引赋值：
arr[0] = newItem - 直接修改 length：
arr.length = 0 - 整体重新赋值：
arr = newArr（这会切断响应式连接）
正确做法是原地修改：
const list = reactive([1, 2, 3]) list.push(4) // ✅ 响应式生效 list.splice(0, 1) // ✅ 删除首项，视图更新 list.splice(1, 0, 99) // ✅ 在索引1处插入99
嵌套对象天然支持深层响应，但有前提
reactive 会递归代理所有嵌套的普通对象和数组，所以你可以安全地写：
const state = reactive({
user: {
profile: { name: 'Alice', age: 30 },
tags: ['dev', 'vue']
}
})
// 这些都会触发响应式更新：
state.user.profile.name = 'Bob' // ✅
state.user.tags.push('frontend') // ✅
state.user.tags[0] = 'engineer' // ✅（数组索引赋值对 reactive 数组有效）
注意：仅限于 已存在属性 的修改。如果给一个原本没有的嵌套路径赋值（比如 state.user.address.city = 'Beijing'），而 address 是 undefined 或 null，就会失效 —— 因为 Proxy 无法拦截对 undefined 属性的 set 操作。
解决办法是先确保路径存在，或用 Vue.set 的替代方式（即先初始化）：
Ainative React Sdk
下载
使用 @ainative/react-sdk 为 React 应用添加 AI 聊天和积分。适用于 (1) 安装 @ainative/react-sdk，(2) 使用 useChat hook 实现聊天完成。
// ❌ 危险
state.user.address.city = 'Beijing'
// ✅ 安全写法（任选其一）
state.user.address = { city: 'Beijing' } // 整体赋值（前提是 address 是 reactive 对象或用 reactive 包裹）
// 或
state.user.address = reactive({ city: 'Beijing' })
避免响应式丢失的常见陷阱
最典型的错误是“替换整个引用”，它会让组件失去对新数据的响应追踪：
-
state.list = state.list.filter(...)→ ❌ 破坏 reactive 关系 -
state.user = { ...state.user, name: 'New' }→ ❌ 新对象不是 reactive 的
应对策略分情况：
- 若用
reactive：坚持原地修改（splice、Object.assign、展开赋值等） - 若逻辑复杂（如 filter/map/sort 后整体替换）：改用
ref，通过.value赋值，语义清晰且安全
例如：
const list = ref([]) list.value = list.value.filter(item => item.active) // ✅ 安全
复杂嵌套结构建议搭配 toRefs 和 shallowRef
当嵌套层级很深、且部分子结构变动频繁但父级无需重渲染时，可考虑：
- 用
shallowRef包裹大型静态对象，避免过度代理开销 - 用
toRefs解构 reactive 对象时，保持每个字段的响应性（尤其用于setup返回） - 对深层嵌套的“配置类”对象，可单独用
reactive创建，再挂载到主状态上
不复杂但容易忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
