在調用完成之前，如何停止渲染vue組件

Question

我用谷歌搜索了這個，但我找不到任何具體的解決方案。 基本上我有一個依賴於init調用的vue組件，我希望它在調用完成之前停止渲染，此時我希望組件呈現。 看似簡單，但除非我遺漏了一些東西，否則找不到任何生命周期方法。

Answer 1

您可以為此目的使用v-if

<template>
    <div v-if="loaded"></div>
</template>

<script>
    export default {
        name: 'TestComponent',
        data: function () {
            return {
                loaded: false
            }
        },
        created() {
          callExternalServices().then(() => {
             this.loaded = true
          })
        }
    }
</script>

它將呈現一個空組件，直到loaded == true

Answer 2

基本上，您在created或mounted生命周期方法中進行初始化調用，並使用調用的響應初始化data對象。 如果在調用期間沒有更改數據，則沒有理由讓vue呈現任何內容。

也許你可以提供一個顯示你的問題的jsfiddle。