「遅延」パラメータに関係なく、Vue非同期コンポーネントが遅延なしでロードされています

Question

Advanced-Async-Componentsをロードして、アプリケーションのロード後にasync componentをロードしています。

Index.vue

<template> 
    <div class=""> 
     <Async></Async> 
    </div> 
</template> 

<script> 
    // async component 
    import LoadComp from '@/components/Loading' 
    import ErrorComp from '@/components/Error' 
    const Async =() => ({ 
     // The component to load. Should be a Promise 
     component: import('@/components/Async'), 
     // A component to use while the async component is loading 
     loading: Load, 
     // A component to use if the load fails 
     error: ErrorComp, 
     // Delay before showing the loading component. Default: 200ms. 
     delay: 4000, // <--- this is not effecting the loading of component 
     // The error component will be displayed if a timeout is 
     // provided and exceeded. Default: Infinity. 
     timeout: 3000 
    }) 

export default { 
    components: { 
     Async 
    } 
} 
</script> 

Async.vue

<template lang="html"> 
    <div class=""> 
     Lorem ipsum dolor sit amet, con .... very larger string/data 
    </div> 
</template> 

<script> 
export default { 
} 
</script> 

<style lang="css"> 
</style> 

上記のコードは正常に動作しますが、それはdelayパラメータの効果はありません（：だから私は、次のコードを試してみましたIndex.vue）。公式の文書によるとdelayはです。ローディングコンポーネントを表示する前の遅延。 4000msの後にコンポーネントをロードする必要がありますが、すぐにロードされます。

どうしてですか？

setTimeoutとは別に、これを実現する方法はありますか？

追加情報

私はdelayオプションがロードコンポーネントを表示する前にミリ秒単位の遅延量を設定しますので、これが起こっているvue-cli

Vue version : ^2.4.2 

Answer 1

を使用してプロジェクトをビルドするためにwebpackテンプレートを使用これはloadingオプションを使用して指定したコンポーネントで、非同期コンポーネントが読み込まれています（このドキュメントでは、ドキュメントの言葉の言葉があまりよくありません）。

以下の例では、1秒後に2つの非同期コンポーネントが読み込まれます。 1つ目は遅延がなく、そのローディングコンポーネント（LoadingComponent）がすぐに表示されます。 2番目はdelayの500です。つまり、0.5秒後に負荷成分が表示されます。

const LoadingComponent = { template: `<h1>Loading...</h1>` } 
 
const NumberBoxComponent = { template: `<h1>123123</h1>` } 
 

 
const AsyncComponent1 =() => ({ 
 
    component: new Promise((resolve) => { 
 
    setTimeout(() => { 
 
     resolve(NumberBoxComponent) 
 
    }, 1000) 
 
    }), 
 
    loading: LoadingComponent, 
 
}) 
 

 
const AsyncComponent2 =() => ({ 
 
    component: new Promise((resolve) => { 
 
    setTimeout(() => { 
 
     resolve(NumberBoxComponent) 
 
    }, 1000) 
 
    }), 
 
    loading: LoadingComponent, 
 
    delay: 500 
 
}) 
 

 
new Vue({ 
 
    el: '#app', 
 
    components: { 
 
    'async-component1': AsyncComponent1, 
 
    'async-component2': AsyncComponent2 
 
    } 
 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js"></script> 
 
<div id="app"> 
 
    <async-component1></async-component1> 
 
    <async-component2></async-component2> 
 
</div>

あなたは非同期コンポーネントの実際のロードを遅延する場合は、setTimeoutを使用する必要があります。