Vue响应式系统有明确边界：直接替换reactive/ref变量、解构赋值、动态新增顶层属性（Vue<3.2）、访问原型链属性均会断开响应链，需通过正确方式如toRefs、.value、Object.assign等维持响应性。
Vue 响应式系统不是“万能拦截器”，它有明确的能力边界。理解哪些操作会断开响应链，比死记 API 更重要——因为失效往往悄无声息，只在页面不更新时才暴露出来。
直接替换 reactive 或 ref 变量会彻底丢失响应式
reactive() 返回的是一个 Proxy 代理对象，ref() 返回的是一个 RefImpl 实例。它们本身是“包装器”，不是数据本身。
- ❌ 错误：用新对象直接赋值给 reactive 变量，如 state = { count: 1 } —— 原来的 Proxy 被丢弃，新对象无任何响应能力
- ❌ 错误：对 ref 变量重新赋值，如 count = ref(0); count = 5 —— ref 包装器被覆盖，只剩普通数字
- ✅ 正确：修改属性而非替换引用。用 Object.assign(state, newData) 或逐项赋值 state.count = 1
- ✅ 正确：ref 类型统一通过 .value 修改，如 count.value = 5
解构赋值会切断响应式连接
ES6 解构本质是值拷贝（基础类型）或浅拷贝（对象/数组），拿到的是脱离代理的“快照”。
- ❌ 错误：const { name, age } = reactive({ name: 'Alice', age: 25 }) —— name 和 age 是普通字符串/数字，修改不触发更新
- ❌ 错误：const { list } = toRef(props) 后再解构 list —— 若 list 是数组，其内部项仍可能非响应式
- ✅ 正确：用 toRefs(state) 解构，得到的是每个属性包裹的 ref，模板中可直接 {{ name }}，逻辑中需 name.value++
- ✅ 正确：模板中直接使用 state.name，避免在 script 中提前解构
动态新增顶层属性在旧版本中不可响应
Vue 3.2 之前，reactive 对象无法自动追踪后续添加的顶层属性（类似 Vue 2 的 Vue.set 限制）。
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
立即学习“前端免费学习笔记（深入）”；
- ❌ 错误（Vue < 3.2）：state.newField = 'hello' —— 模板读取 state.newField 可见，但修改它不会更新视图
- ✅ 正确（通用）：初始化时预声明所有可能用到的字段，哪怕暂时为 null 或 undefined
- ✅ 正确（Vue ≥ 3.2）：启用 shallowRef + proxyRefs 组合，或改用 ref 包裹整个对象
- ✅ 正确（兼容写法）：用 Object.assign(state, { newField: 'hello' }) 触发响应式更新
原型链与原生方法不参与响应式追踪
Vue 显式跳过原型上的属性和方法，这是设计选择，不是 bug。它避免了副作用、依赖失真和性能隐患。
- ❌ 错误：把共用字段挂到构造函数 prototype 上，再让 reactive 对象继承 —— obj.msg 可读，但修改不响应，也无法触发依赖收集
- ❌ 错误：在模板中调用 obj.toString() 并期望它响应式更新 —— 方法调用不触发 track，也不会引起重渲染
- ✅ 正确：共用状态提取为独立 const shared = reactive({ a: 1, b: 2 })，各组件导入使用
- ✅ 正确：封装成 useSharedState() 等组合式函数，内部返回统一结构的 reactive/ref
响应式不是魔法，而是基于 Proxy 的精密协作机制。真正稳定的代码，不靠侥幸，而靠清楚知道“什么能做、什么不能做、为什么不能”。
