Vue3中reactive嵌套数组script访问正常模板渲染报错问题

• 首先是异步请求的时序差异：组件首次渲染时，axios.get的请求还未返回结果，此时state.articles还是初始化的空数组[]。模板执行state.articles[0][0]时，第一步取state.articles[0]得到的是undefined，再尝试访问undefined[0]就会直接抛出错误。
• 你在then回调里的console.log是请求返回、数据已经被推入state.articles之后才执行的，此时数组已经有有效值，所以能正常打印结果。
• 直接渲染state.articles[0]不报错的原因是：Vue模板渲染undefined类型的值时会直接输出空内容，不会抛出异常，等请求返回触发响应式更新后，就能正常渲染出完整数组内容。

有两种常用方案可以规避空值报错：

1. 使用可选链操作符（Vue 3.2及以上版本原生支持）

<h2>{{ state.articles[0]?.[0] }}</h2>

可选链会在左侧值为undefined/null时直接终止表达式执行，不会抛出错误。

2. 增加条件渲染判断，等数组有值后再渲染对应内容

<h2 v-if="state.articles.length">{{ state.articles[0][0] }}</h2>

内容的提问来源于stack exchange，提问作者Artur Müller Romanov