[vue3进阶] 3.异步组件

在我们的网站性能优化中，为了缩短页面加载的时间，我们就要加载尽可能少的内容，比如一些在首屏中不显示的内容，尽量不去加载，这样就可以提高首屏的速度。
然后在需要显示某些组件时，再去进行异步加载，vue的defineAsyncComponent的方法就给我们提供了这样的功能。
看这个方法名字就知道，用它来定义一个异步组件

  components: {
    '异步组件的名字': defineAsyncComponent(() => import('异步组件的路径')),
  },

通过以上这种方式就可以定义一个异步组件了

我们还是来写一个小dome，
比如在一个企业站中，用户进来时显示一些企业的信息、产品介绍等等
在网站的导航栏上有登录按钮，点击以后显示一个登录框

我们来分析一下，这个登录框默认状态下是不显示，只有用户点击了登录按钮才显示，那么我们就可以把登录框做成一个异步组件，在用户刚刚进入首页时，就不用加载它，提高了首页的速度

1）先来写一个登录框的组件

<template>
  <div class="login-box">
    <div>登录模块</div>
    <form>
      <div><label>用户名</label><input type="text" /></div>
      <div><label>密码</label><input type="password" /></div>
      <div><button type="submit">登录</button></div>
    </form>
  </div>
</template>

<script>
export default {}
</script>

<style>
.login-box {
  display: inline-block;
  width: 300px;
  padding: 30px 40px;
  background-color: #eee;
  border-radius: 10px;
}
</style>

这里只是一个示例，UI很丑，大家忍耐一下

2）使用异步组件的方式引入它，默认状态是隐藏的，在点击按钮时，显示登录框

<template>
  <div>
    <button @click="onClick">点击显示登录</button>
    <br />
    <login v-if="showLogin"></login>
  </div>
</template>

<script>
// 异步组件
import { defineAsyncComponent } from 'vue'
export default {
  name: 'App',
  components: {
    login: defineAsyncComponent(() => import('./components/login')),
  },
  data() {
    return {
      showLogin: false,
    }
  },
  methods: {
    onClick() {
      this.showLogin = true
    },
  },
}
</script>

<style></style>

我们在开发环境刷新页面，看到的网络请求是

然后点击按钮，显示登录框
就会去加载登录组件

这样就实现了组件的异步组件，大家动手写一写，记不住写法也没关系，用到时去官网去查就行。

在学习开发的过程中，有些语法、写法是需要大家记住的，有些要理解为什么这么做，这么做有什么好处。死记api我是非常反对，因为这些api都是网上随便可以查到的，真正学到的是自己理解了的知识。
在后面学习vuex，大家也需要注意着一点。