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 组件之前设置延迟量（以毫秒为单位），该组件是您通过loading选项指定的组件正在加载 async 组件时显示（文档在此文档上的措辞很差）。

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

＆＃13;

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
  }
})

＆＃13;

<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>

＆＃13;

如果要延迟异步组件的实际加载，则应使用setTimeout。

无论'delay'参数如何，Vue异步组件都会无延迟地加载

1 个答案: