为什么在Vue中，当数组初始化并显示输出时，会出现“无法读取未定义的属性”的错误？
<p>我有两个 vue 文件，App.vue 和一个组件UsersPage.vue。</p>
<p>UsersPage.vue:</p>
<pre class="brush:php;toolbar:false;"><脚本>
导出默认值{
数据：（）=>（{
用户列表：[]
}),
方法：{
异步创建用户列表（）{
this.usersList =等待fetch(“https://jsonplaceholder.typicode.com/users”).then((response)=>response.json());
}
},
创建（）{
this.createUsersList();
}
}
</脚本>
<模板>
-
<li v-for="usersList 中的用户" :key=“user.id”><b>姓名：</b>{{user.name}},<b>用户名：</b> {{user.username}},<b>邮编：</b> {{user.address.street}}
</ul>
</模板></pre>
<p>和App.vue:</p>
<pre class="brush:php;toolbar:false;"><脚本>
从“./components/UsersPage.vue”导入UsersPage
导出默认值{
成分： {
用户页面，
},
数据：() => ({
currentPage: "首页",
}),
方法： {
显示主页() {
this.currentPage = "首页";
},
显示登录页面() {
this.currentPage = "登录";
},
},
};
</脚本>
<模板>
<标头类=“标头”>
<span class="logo">
这就是风景
</span>
<nav class=“nav”>
首页
登录</a>
</nav>
</标题>
<用户页面/>>
</模板></pre>
<p>当我运行这个程序时，没有错误，并且输出仍然显示。然而，当我将usersList更改为任何具有任意数量元素的数组（例如<code>usersList:[1,2]</code>），数据仍然以正确的格式显示，但在浏览器的控制台中会出现以下错误：</p>
<pre class="brush:php;toolbar:false;">Uncaught TypeError: Cannot read properties of undefined (reading 'street')
at UsersPage.vue:19:149
at renderList (runtime-core.esm-bundler.js:2894:22)
at Proxy._sfc_render (UsersPage.vue:19:163)
at renderComponentRoot (runtime-core.esm-bundler.js:902:44)
at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5615:57)
at ReactiveEffect.run (reactivity.esm-bundler.js:187:25)
at instance.update (runtime-core.esm-bundler.js:5729:56)
at setupRenderEffect (runtime-core.esm-bundler.js:5743:9)
at mountComponent (runtime-core.esm-bundler.js:5525:9)
at processComponent (runtime-core.esm-bundler.js:5483:17)</pre>
<p>为什么会出现这个错误，即使数据正确地呈现并且地址也存在于https://jsonplaceholder.typicode.com/users中？</p>