vue前端开发自学,异步加载组件,提升用户端的客户体验度

vue前端开发自学,异步加载组件,提升用户端的客户体验度！现实项目开发时，组件的数量非常庞大，如果都是一口气加载完，对手机用户来说，体验度会很差。因此，非常有必要使用异步加载。

那就是，用到了哪个组件，再去加载它就行了。用不到的时候，不加载它。下面看看代码案例。

<template>
  <h3>动态切换组件的显示</h3>
  <keep-alive>
    <component :is="ComponetShow"></component>
  </keep-alive>
  
  <button @click="changeShow">切换组件显示</button>
</template>
<script>
import {defineAsyncComponent} from "vue"
import ComA from './components/ComA.vue'
//异步加载组件B
const ComB = defineAsyncComponent(
  () => {
    return  import("./components/ComB.vue")
  }
)

  export default{
    data(){
      return{
        ComponetShow:"ComA"
      }
    },
    components:{
      ComA,
      ComB
    },
    methods:{
      changeShow(){
        this.ComponetShow = this.ComponetShow == "ComA" ? "ComB":"ComA"
      }
    }
   
  }
</script>

如图，这个就是测试代码所有内容。我们针对组件ComB.vue做了一些小的修正。使用了一个官方提供的函数。需要提前引入这个函数。调用该函数。

const ComB = defineAsyncComponent(
  () => {
    return  import("./components/ComB.vue")
  }
)

这段代码，很明显是被包围起来 了，使用官方提供的这个函数，就可以实现异步加载的效果。

下面给大家展示一下，在控制台里观测到的网络请求情况。

如图所示。初始化！页面 渲染已经完毕了。但是并未看见请求ComB.vue的事情！这个就是异步的好处。

如图，当我们切换组件显示。改成显示ComB.vue时，才触发了该网络请求。