Vue3渲染完整对象正常但访问其属性报undefined，如何排查与解决？

问题原因 #

首先明确：该问题和props接收、mounted钩子执行的生命周期时序差异无关。
问题的核心原因是fetch是异步请求：

• 组件首次渲染时，mounted钩子刚触发，异步请求还没返回结果，此时data里的threads还是初始的空数组
• computed属性thread执行find匹配时，空数组找不到符合条件的项，会返回undefined
• 直接渲染{{ thread }}时，Vue会自动将undefined转为空字符串输出，不会触发报错；但直接访问undefined.title属于读取undefined的属性，就会抛出你遇到的错误
• 等异步请求返回、给threads赋值之后，computed才会重新计算得到正确的thread对象，此时报错已经在首次渲染阶段触发了。

常用解决方式 #

• 方法1：使用可选链操作符避免读取undefined属性
  直接修改模板写法，Vue 3 原生支持可选链，Vue 2 配置babel插件后也可使用：

<div class="single-thread-card">
  <h1>{{ thread?.title }}</h1>
</div>

• 方法2：增加条件渲染，搭配加载状态优化体验
  只有当thread有有效值时才渲染内容区域，还可补充加载提示提升用户体验：

<div class="single-thread-card" v-if="thread">
  <h1>{{ thread.title }}</h1>
</div>
<div v-else>帖子加载中...</div>

• 方法3：给computed属性设置兜底返回值
  修改computed逻辑，匹配不到时返回空对象，避免返回undefined：

computed: {
  thread () {
    return this.threads.find(t => t.id === this.id) || {}
  }
}

这种方式下，空对象读取title只会得到undefined，不会触发属性读取错误。

内容的提问来源于stack exchange，提问作者MnL