Vue2/3中异步加载子组件

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的时候，则会展示 ErrorComponent
        timeout: 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>

参考：https://blog.csdn.net/CRMEB/article/details/112516876