vue响应式系统要求变更路径被完整捕获：新增字段需显式声明或$set/整体替换；深层嵌套每层须为响应式；数组操作应避免直接索引赋值；超深结构宜分层响应或扁平化处理。
Vue 处理深层嵌套对象和数组变更，核心不在“能不能改”，而在于“改的路径是否被响应式系统捕获”。改了但视图不更新，往往不是数据没变，而是 Vue 根本没监听到那条路径。
新增字段必须显式声明或用 $set（Vue 2）/整体替换（Vue 3）
给已有响应式对象加新属性（比如 this.user.avatar = 'url.jpg'），Vue 2 和 Vue 3 都不会自动追踪——这不是 bug，是响应式初始化机制决定的。
- 最稳做法：初始化时就定义完整结构，哪怕填空值：user: { name: '', email: '', avatar: '' }
- 运行时添加：Vue 2 必须用 this.$set(this.user, 'avatar', 'url.jpg')；Vue 3 推荐用 ref 包裹整个对象，再整体赋新值：user.value = { ...user.value, avatar: 'url.jpg' }
- 绝对避免：this.user.avatar = 'url.jpg' → 视图不更新、watch 不触发
深层嵌套对象每一层都得是响应式
像 user.profile.address.city 这样的路径，只要 profile 或 address 是普通 JS 对象（非 reactive），改 city 就不会触发更新。
- 初始化时逐层 reactive：reactive({ profile: reactive({ address: reactive({}) }) })
- 接口返回新数据后，别只替换某一层：this.user.profile = res.data.profile 很危险；应整体替换：this.user = { ...this.user, profile: res.data.profile }
- Vue 2 可用 Vue.set(this.user, 'profile', newProfile)；Vue 3 更倾向用 ref + 解构，或对深层节点单独用 shallowRef 控制深度
嵌套数组更新要定位到目标对象再操作
list[0].items[2].status = 'done' 这类写法，在多数场景下不响应——尤其当 items 是普通数组或未 reactive 的对象时。
- 先确保 list 是响应式数组，且每个 item 是 reactive 对象
- 修改数组本身：用 push、splice 等变异方法；避免直接索引赋值：arr[1] = x
- 改嵌套字段：定位到具体对象后再处理。Vue 2 用 this.$set(this.list[0].items, 2, { ...this.list[0].items[2], status: 'done' })；Vue 3 建议提前让 items 是 reactive 数组，或直接 map 整体替换
超深结构优先考虑分层响应或结构扁平化
组织架构树、千项配置表单这类超深嵌套，全量 reactive 会带来 Proxy 实例爆炸、依赖冗余、更新扩散等性能问题。
- 顶层用 shallowReactive：只代理第一层，内部变更靠手动触发或整体替换
- 大型静态数据（如菜单、原始树）用 shallowRef，避免初始化遍历
- 纯展示字段（如 userInfo.profile.address）用 readonly + markRaw，彻底跳过响应式系统
- 更根本的解法：服务端同步提供扁平化数据（如 nodes: [] + treeMap: { id: '1', parentId: null }），前端用 ID 映射构建响应逻辑
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
