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之外，还有其他方法可以实现吗？

附加信息

我以前webpack模板生成使用vue-cli

Vue version : ^2.4.2 

Answer 1

出现这种情况的项目，因为delay选项显示装载组件之前，以毫秒为单位的延迟量，它是通过loading选项指定的组件，用于显示异步组件正在加载（此文档措辞不佳）。

在下面的示例中，两秒钟后加载两个异步组件。第一个没有延迟，其加载组件（LoadingComponent）将立即显示。第二个是delay的500，这意味着半秒钟后，它将显示其加载组件。

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。