计算属性因依赖字段未初始化而读取 undefined/null 导致 TypeError，本质是响应式数据声明时机错位；需确保 data/setup 中预设完整结构、computed 声明在响应式变量之后、用 ?.?? 防御性读取，并借助 Vue Devtools 定位未代理字段。
计算属性名未就绪就参与迭代求值，本质是访问了尚未初始化的响应式字段，触发 undefined 或 null 的非法读取/调用，进而引发运行时崩溃（如 TypeError: Cannot read property 'xxx' of undefined）。这不是死循环，而是初始化时机错位问题。
确认计算属性依赖的数据是否已声明并响应式化
Vue 的响应式系统只代理 data、setup() 中用 ref/reactive 显式声明的字段。若计算属性引用了未声明的属性（如拼写错误、条件分支中漏定义），就会在首次求值时读到 undefined。
- 检查
computed内部所有访问路径：例如user.profile.name，确保user和user.profile都已在响应式对象中存在，不能仅靠后续逻辑“补上” - 避免在
data()中返回空对象再异步填充——应预设结构：user: { profile: { name: '' } } - 使用可选链操作符（
?.）做防御性读取，但注意它只防报错，不解决数据缺失本身
规避 setup 中变量提升或执行顺序导致的引用提前
在 Composition API 中，computed 声明若位于响应式变量创建之前，或依赖了尚未执行完毕的异步初始化逻辑，也会出现“名已知、值未就绪”的情况。
- 确保
ref或reactive变量定义在computed之前，且赋初值（哪怕为null或空数组） - 不要在
computed中直接 await 或依赖未 resolve 的 Promise；需用watch或onMounted等钩子等待数据就位后，再让计算属性生效 - 对可能为空的源数据，用
??或默认值兜底：computed(() => props.list?.length ?? 0)
警惕模板中隐式触发计算属性的时机陷阱
模板渲染会立即触发所有计算属性求值。如果此时组件刚挂载、props 还未同步、或父组件传入的响应式对象尚未完成 proxy 包装，就容易踩中“未就绪”边界。
- 给关键依赖加
v-if守卫：例如<div v-if="userReady">{{ fullName }}</div>，其中userReady是一个基于user是否完整初始化的简单判断 - 在
computed内部加入存在性校验，不直接抛错，而是返回占位值或undefined，配合模板的v-if或??处理 - 避免在
computed中调用未确保存在的方法（如this.loadData()），这类逻辑应移至mounted或watch
利用 Vue Devtools 快速定位未就绪字段
崩溃堆栈往往只显示“Cannot read xxx”，不指明源头。Devtools 的 Reactivity 面板能直观展示当前哪些字段是 undefined 或未被代理。
- 打开 Vue Devtools → “Reactivity” 标签页 → 找到你的组件 → 展开 data 或 setup 中的对象
- 观察目标字段是否显示为灰色（未定义）、红色（非响应式）或空白（未声明）
- 对比崩溃前后的状态变化，确认字段是在哪一步从“有值”变“无值”，或从未被正确注入
