Vue响应式系统存在四类边界情况：一是对象新增/删除属性不触发更新，需用Vue.set或Object.assign；二是数组索引赋值和length修改不响应，应使用splice或替换整个数组；三是嵌套对象需首次访问才代理，初始结构应完整或显式reactive包裹；四是props只读但深层属性可响应，修改须通过$emit或toRefs+ref封装。
Vue 响应式系统在绝大多数场景下表现稳定，但确实存在几类典型边界情况——不是“bug”，而是 JavaScript 语言限制与响应式设计权衡下的自然结果。处理得当，就能避免视图不更新、依赖丢失、嵌套失效等常见困惑。
对象新增/删除属性无法触发更新
Vue 在初始化时仅对 data 或 reactive 初始化时已存在的属性 做响应式转换。后续直接添加或删除属性（如 obj.newKey = 'value' 或 delete obj.oldKey）不会被侦测到。
- ✅ 正确做法：使用
Vue.set(obj, key, value)（Vue 2）或reactive({...obj, [key]: value})（Vue 3 推荐） - ✅ Vue 3 中更推荐用
Object.assign({}, obj, { key: value })替换整个对象，或用shallowRef+ 手动触发更新 - ⚠️ 注意：
this.$set在 Vue 3 的组合式 API 中已移除，应统一使用reactive或ref配合逻辑封装
数组索引赋值和 length 修改不响应
直接通过下标设置元素（arr[0] = newValue）或修改 length（arr.length = 0），Vue 无法捕获这些操作——因为它们不调用被重写的原型方法（如 push、splice）。
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- ✅ 替代方案：用
arr.splice(index, 1, newValue)更新单个项；用arr.splice(0)清空 - ✅ Vue 3 中可配合
ref使用：修改arr.value[index] = newValue不生效，必须用arr.value = [...arr.value.slice(0, index), newValue, ...arr.value.slice(index + 1)] - ✅ 对性能敏感场景，可用
shallowRef+triggerRef主动通知更新
嵌套对象的深层属性访问才触发代理创建
Vue 的响应式是懒递归的：只有首次读取某个嵌套对象属性（如 state.user.profile）时，才会对 profile 创建 reactive 代理。若该属性初始为 null 或 undefined，后续赋值为对象也不会自动转为响应式。
立即学习“前端免费学习笔记（深入）”；
- ✅ 初始化时尽量提供完整结构，例如：
user: { profile: { name: '' } } - ✅ 若需动态挂载，用
reactive({})显式包裹新对象再赋值：state.user.profile = reactive({ name: 'Alice' }) - ✅ Vue 3 中也可用
markRaw标记不需要响应式的大型外部对象（如第三方库实例），避免过度代理
props 的只读性与深层响应的共存逻辑
子组件接收的 props 是只读响应式代理。基本类型（如 count）变化会更新，而对象内部属性（如 user.name）也能响应——但你不能在子组件中直接改 props.user = {}，也不能改 props.count++。
- ✅ 想修改 prop 数据？应通过
$emit通知父组件，由父组件更新源数据 - ✅ 若需本地副本并保持响应，可在
setup中用toRefs(props)解构后，再用ref或reactive重新包装 - ✅ 对于复杂嵌套结构，建议用
computed包装派生状态，而非直接操作 props
