vue响应式系统存在四类边界情况：对象新增/删除属性需特殊api；数组索引和length赋值不响应，须用splice等方法；null/undefined中断响应链，需可选链或初始化守卫；props为只读代理，修改需emit或本地副本。
Vue 响应式系统在绝大多数场景下自动工作，但遇到视图不更新、依赖丢失或深层属性失效时，往往不是代码写错了，而是撞上了它的几类典型边界情况。理解这些限制背后的原理，比死记“该用什么API”更可靠。
对象新增/删除属性不响应
Vue 初始化时只对已存在的属性建立响应式连接。后续直接添加 obj.newKey = 'val' 或删除 delete obj.oldKey，不会触发更新。
- Vue 2：必须用 this.$set(obj, key, value) 或 this.$delete(obj, key)
- Vue 3：推荐用 Object.assign({}, obj, { key: value }) 替换整个对象；或用 reactive({ ...obj, key: value }) 重建
- 避免在 setup 中直接修改 props 对象的属性——它被包装为只读代理，赋值会静默失败
数组索引与 length 变更无效
直接写 arr[0] = newItem 或 arr.length = 0 不会触发响应，因为 Vue 重写了数组原型方法（如 push、splice），但没劫持索引赋值这类底层操作。
- 更新某项：用 arr.splice(index, 1, newItem)
- 清空数组：用 arr.splice(0) 或 arr.length = 0 配合 triggerRef(arr)（若用 shallowRef）
- 用 ref 包裹数组时，修改必须作用于 arr.value，且仍需使用响应式友好的方式（如 arr.value = [...arr.value.slice(0, i), newItem, ...arr.value.slice(i + 1)]）
null/undefined 中断响应链
响应式本身允许属性值为 null 或 undefined，但访问路径中任一环节为它们（如 user.profile.name 中 profile 是 null），就会抛出 TypeError，导致依赖收集中断，后续即使赋了有效对象也无法恢复更新。
- 模板中用可选链：{{ user?.profile?.name }}
- 计算属性里主动守卫：computed(() => props.data?.items?.length || 0)
- 初始化结构尽量完整：user: { profile: { name: '' } }，或动态赋值前先 reactive({}) 包裹
Props 的只读性与深层响应共存
props 是只读响应式代理。基本类型变更（如 count）和对象内部属性变更（如 user.name）都会触发更新，但子组件不能直接改 props.user = {} 或 props.user.name = 'x'。
- 想修改对象内部字段：通过 emit 通知父组件处理，或用 toRefs(props) + ref 封装后在本地维护副本
- 传入静态值（如 :title="'Hello'"）没有响应式——它只是字符串字面量，不是响应式数据源
- 确保父组件传递的是 ref 或 reactive 数据，而非普通对象
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
