异步加载

为了分包或者是为了减少首屏js加载的数量，vue提供了组件的懒加载机制，也就是组件的异步加载。

import { defineAsyncComponent } from 'vue' c
const AsyncComp = defineAsyncComponent(() =>Proimse)

在ESM中，直接import也会返回一个promise,因此我们可以这样写

const AsyncComp = defineAsyncComponent(() => import('./components/MyComponent.vue') )

这样也是合法的，打包器会自动处理这里的import

异步加载的时候，肯定会出现加载失败的情况，vue也针对这种情况，允许你添加一个fallback组件

异步显示

我说的异步显示其实是这个组件只是一个展示数据或内容的组件，它依赖于一个接口，那么我们可以这样取出来

<template>
    <div v-if="success"></div>
    <div v-else></div>
</template>
<script setup>
const success = ref(false)
ajax().then(()=>{success.value = true})
</script>

这样就是一个异步显示了，但是我上面的示例代码其实很简单，真正要处理的时候考虑的条件会更多，逻辑也会很复杂。

这样有哪些好处呢？首先，提前触发请求能够减少组件显示的时间。其次，可以通过模板来展示更多的状态。我这里只写了成功或失败，但是其实你可以写更多的状态。

需要注意的是，你不能在script setup 中直接使用await,必须使用then。如果你想写async await 你可以使用Options API

这里我又想到了vue3这个setup，为什么要叫setup呢？

比如我这里的例子，setup就表示建立。在我这个例子里，这个组件就是通过一个ajax来建立的，因此我们在setup里执行毫无问题。

我觉得这就是setup的真实意义。建立数据，建立数据与模板的链接，这样才能称之为一个组件。组件也就是数据与模板的强联系，而css只是模板的衣服罢了。当我们把其中一个这样的强联系封装出来，它就是一个组件

vue3就应该这样学-18

异步加载

异步显示