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>
