无论 'delay' 参数如何，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 之后加载组件，但它会立即加载。

Why is this happening?

除了使用 setTimeout 之外，还有其他方法可以实现吗？

附加信息

我使用 webpack 模板构建项目，使用 vue-cli

Vue version : ^2.4.2

Answer 1

发生这种情况是因为 delay 选项设置了显示 loading 组件之前的延迟量（以毫秒为单位），该组件是您通过 loading 选项在加载 async 组件时显示（文档在这方面措辞不佳）。

在下面的示例中，一秒钟后加载了两个异步组件。第一个没有延迟，其加载组件 (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。

无论 'delay' 参数如何，Vue 异步组件都会立即加载

Vue async components are loading without delay regardless of the the 'delay' parameter

asynchronous

vue-component

async-components

vuejs2