vue先加载数据再渲染

---

title: vue先加载数据再渲染
date: 2021-05-05 01:41:59

---

前言

vue 使用中 bug 记录。

版本：vue 3.0

由于 JavaScript 中请求通常是异步，因此几乎无法实现先加载数据再渲染页面。

但是，我们可以用 v-if 判断数据是否已加载，来实现加载完数据再渲染的效果。

应用

比如，有如下数据，需要请求后端获取：

paper: {}

示例一

在页面中，我们可能如此使用：

<p>{{ paper.venue.name }}</p>

由于渲染通常快于数据请求，则可能报如下错误：

TypeError: Cannot read property '_key' of undefined

不过可能无伤大雅（页面最终能展现）。

示例二

但如果如此使用（传入组件）：

<router-link :to="{ path: '/' }">{{ paper.venue.name }}</router-link>

则可能报如下错误，甚至页面无法显示：

TypeError: Cannot read property 'parentNode' of null

解决

直接使用 v-if 全部解决：

<p v-if="paper.venue">{{ paper.venue.name }}</p>
<router-link v-if="paper.venue" :to="{ path: '/' }">{{ paper.venue.name }}</router-link>