title: vue先加載數(shù)據(jù)再渲染
date: 2021-05-05 01:41:59

前言

vue 使用中 bug 記錄。

版本：vue 3.0

由于 JavaScript 中請(qǐng)求通常是異步，因此幾乎無(wú)法實(shí)現(xiàn)先加載數(shù)據(jù)再渲染頁(yè)面。

但是，我們可以用 v-if 判斷數(shù)據(jù)是否已加載，來(lái)實(shí)現(xiàn)加載完數(shù)據(jù)再渲染的效果。

應(yīng)用

比如，有如下數(shù)據(jù)，需要請(qǐng)求后端獲取：

paper: {}

示例一

在頁(yè)面中，我們可能如此使用：

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

由于渲染通常快于數(shù)據(jù)請(qǐng)求，則可能報(bào)如下錯(cuò)誤：

TypeError: Cannot read property '_key' of undefined

不過(guò)可能無(wú)傷大雅（頁(yè)面最終能展現(xiàn)）。

示例二

但如果如此使用（傳入組件）：

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

則可能報(bào)如下錯(cuò)誤，甚至頁(yè)面無(wú)法顯示：

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>