Vue2/3中异步加载子组件

场景

基于vue的前端开发中，在app.vue中，有一个子组件feedback，它需要在用户登录接口响应状态码200后，才会异步加载feedback并挂载，否则其他情况下则不加载feedback组件，如何实现。

Vue2

v-if + 懒加载实现

使用v-if指令来实现在用户登录后异步加载feedback组件的功能。以下是示例代码：

<template><div><div v-if="loggedIn"><async-feedback></async-feedback></div></div>
</template><script>export default {data() {return {loggedIn: false}},created() {// 假设用户登录接口返回的响应状态码为200// 在此处替换为实际使用的代码setTimeout(()=>{this.loggedIn = true}, 2000)},components: {// 这个 `import` 函数会返回一个 `Promise` 对象。'async-feedback': () => import('./AsyncFeedback.vue')}}
</script>

在上面的代码中，我们使用了v-if指令来根据用户是否登录来决定是否渲染AsyncFeedback组件。在created钩子函数中，我们假设用户登录接口返回的响应状态码为200，然后将loggedIn数据属性设置为true。这将导致v-if指令将AsyncFeedback组件渲染到DOM中。

component + 懒加载实现

使用<component :is="...">语法来延迟加载组件，以提高应用程序的性能。使用这种方式可以在需要时才加载组件，而不是在应用程序启动时立即加载所有组件。

// 需要等待登录后再加载的组件
Vue.component('feedback', () => import('components/feedback/index.vue'))// 第二步
<component :is="rightBottomCom"></component>// 第三步rightBottomCom(){return this.loggedIn ? 'feedback' : ''
}

高级异步组件

  <script type="text/javascript">// 注册组件var resCom = {template: "#async-example"};var promise = new Promise(function(resolve, reject){setTimeout(function(){resolve(resCom)}, 2000);});var LoadingComponent = {template: '<div>加载中显示的组件</div>'};var ErrorComponent = {template: '<div>异步组件加载失败</div>'};// Vue.component('async-example', function(resolve, reject){//   setTimeout(function(){//     // 向resolve回调传递组件定义//     resolve(resCom);//   }, 1000);// });const AsyncComponent = function(){return {// 需要加载的组件 (应该是一个 `Promise` 对象)component: promise,// 异步组件加载时使用的组件loading: LoadingComponent,// 加载失败时使用的组件error: ErrorComponent,// 展示加载时组件的延时时间。默认值是 200 (毫秒)delay: 200,// 如果提供了超时时间且组件加载也超时了，// 则使用加载失败时使用的组件。默认值是：`Infinity`// PS: 组件加载超时时间，超时表示加载失败，会展示ErrorComponent。// 比如在这里当我们把 Promise 中的 setTimeout 改为 4000的时候，则会展示 ErrorComponenttimeout: 3000}}var vm = new Vue({el: "#app",// 注意这里与之前的写法不同之处，是因为我们把这个方法提出去赋值给了AsyncComponent的变量components:{'async-example': AsyncComponent}})</script>

Vue3

`Suspense`组件和`defineAsyncComponent`函数

<template><div><Suspense><template #default><div v-if="loggedIn"><AsyncFeedback /></div></template><template #fallback><!-- 加载指示器 --></template></Suspense></div>
</template><script>import { defineAsyncComponent, ref } from 'vue'const AsyncFeedback = defineAsyncComponent(() => import('./AsyncFeedback.vue'))export default {setup() {const loggedIn = ref(false)// 模拟用户登录接口响应setTimeout(() => {loggedIn.value = true}, 2000)return { loggedIn, AsyncFeedback }}}
</script>