Vue：defineAsyncComponent(异步组件)、component(动态组件)、keep-alive(缓存组件)

异步组件：defineAsyncComponent

Vue3 的 defineAsyncComponent 特性可以让我们延迟加载组件。因为在默认情况下，在构建项目或运行项目时，会将所有所需要的打包成一个整体，vue为单页面应用，同步加载大量的页面代码会导致页面长时间处于空白情况，所以

这是一个改善初始页面加载的好方法，因为该方法会将以较小的块加载，而不必在页面加载时加载每个组件。

来自官网可查看示例：异步组件

import { defineAsyncComponent } from 'vue'const AsyncComp = defineAsyncComponent(() => {return new Promise((resolve, reject) => {// ...load component from serverresolve(/* loaded component */)})
})
// ... use `AsyncComp` like a normal component

使用 import 引入 所需组件

// 使用
<AsyncComp ></AsyncComp >import { defineAsyncComponent } from 'vue'const AsyncComp = defineAsyncComponent(() =>import('./components/MyComponent.vue')
)

 defineAsyncComponent 可配置参数：

const AsyncComp = defineAsyncComponent({// the loader functionloader: () => import('./Foo.vue'),// A component to use while the async component is loadingloadingComponent: LoadingComponent,// Delay before showing the loading component. Default: 200ms.delay: 200,// A component to use if the load failserrorComponent: ErrorComponent,// The error component will be displayed if a timeout is// provided and exceeded. Default: Infinity.timeout: 3000
})

---

动态组件：component

可以根据条件动态选择要渲染的组件。通过使用动态组件，可以基于不同的状态条件来切换不同的组件，从而实现更灵活的组件复用和组合

使用情景：有的时候，在页面中需要在不同组件之间进行动态切换，这时候除了条件渲染，还可以使用动态组件来实现

注意：

• is 属性的值必须是以字符串形式指定的已注册组件的名称。
• :is 则会将表达式的值作为字符串解析，从而动态地渲染相应的组件。
• vue3 setup 语法糖跟vue2区别 引入不能直接赋值给:is 必须定义

<!-- 父组件 -->
<template>
<div class=''><component :is="childOneCom"></component>
</div>
</template><script setup>
import childOne from "./childOne.vue";const childOneCom = ref(childOne);</script>
<style lang='scss' scoped>
</style>

---

缓存组件：keep-alive

 keep-alive 包裹的组件（component）在被隐藏后，并不会将组件销毁，而是将其缓存起来，下次再次使用时会从缓存中取出复用的过程。 只执行了（创建前后、挂载前后），没有执行销毁函数，当再次切回时，不执行创建前后、挂载前后的生命周期函数了，而是只执行了父组件的更新前后函数执行

参数：

• include：匹配的路由/组件被缓存
• exclude：匹配的路由/组件不被缓存
• max：最大缓存数

include/exclude：使用逗号分割、正则形式，必须采用v-bind形式、数组形式，必须采用v-bind形式

匹配规则：

• 首先匹配组件的name选项
•  如果name选项不可用，则匹配它的局部注册名称（父组件components选项的键值）
•  匿名组件，不可匹配（路由组件没有name选项，并且没有注册的组件名）
•  只能匹配当前被包裹的组件，不能匹配更下面嵌套的子组件=>例如：只能匹配路由组件的name选项，不能匹配路由组件里面的嵌套组件name选项
•  不会在函数式组件中正常工作，因为他们没有缓存实例
•  exclude的优先级>include

  <!-- 逗号分隔字符串 --><keep-alive include="one,two"><component :is="three"></component></keep-alive><!-- 正则表达式 (使用 v-bind) --><keep-alive :include="/one|two/"><component :is="three"></component></keep-alive><!-- 数组形式 (使用 v-bind) --><keep-alive :include="['one', 'two']"><component :is="three"></component></keep-alive><!— 缓存路由 --><keep-alive include='two'><router-view></router-view></keep-alive>

 vue2.x  vue3.x 区别

在App.vue中
<!-- vue2.x配置 -->
<template><keep-alive><router-view v-if="$route.meta.keepAlive" /></keep-alive><router-view v-if="!$route.meta.keepAlive"/>
</template><!-- vue3.0配置 -->
<template><router-view v-slot="{ Component }"><keep-alive><component :is="Component"  v-if="$route.meta.keepAlive"/></keep-alive><component :is="Component"  v-if="!$route.meta.keepAlive"/></router-view> 
</template>

vue3.x 中使用name属性

• 插件vite-plugin-vue-setup-extend

• <script>export default {name: 'xxx',}
  </script><script setup></script>
  

• <script>export default {name: 'xxx',setup(){return {}},}
  </script>
  

• import { defineComponent } from 'vue';
  defineOptions({name: 'xxx',
  })
  

---

总结：

可根据实际情况 结合、拆分使用