1.在动态组件上使用keep-alive

我们可以在一个多标签的界面中使用is attribute来切换不同的组件：

<component :is="currentTabComponent"></component>

当在这些组件之间切换的时候，有时会想保持这些组件的状态，以避免反复渲染导致的性能问题。

例如我们开发一个多标签界面，在选择其中一个组件点击展开文章后，切换到其他组件，再切回展开文章的组件，是不会继续展示之前选择的文章的，这是因为每次切换新组件的时候，Vue都创建了一个新的currentTabComponent实例
重新创建动态组件的行为通常是非常有用的，但是在切换多标签界面的案例中，我们更希望那些标签的组件实例能够被在它们第一次被创建的时候缓存下来，为了解决这个问题，我们可以用一个keep-alive元素将其动态组件包裹起来

<!-- 失活的组件将会被缓存！ -->
<keep-alive>
  <component :is="currentTabComponent"></component>
</keep-alive>

这样一样展开文章的标签组件保持了它的状态（被选中的文章展开）甚至当它未被渲染时也是如此。

2.异步组件

在大型应用中，我们可能需要将应用分割成小一些的代码块，并且只在需要的时候才从服务器加载一个模块。为了简化，Vue有一个defineAsyncComponent方法。

const { createApp, defineAsyncComponent } = Vue
const AsyncComp = defineAsyncComponent(()=>new Promise((resolve, reject)=>{})) 此方法接受返回Promise的工厂函数，从服务器检索组件定义后，应调用Promise的resolve回调，也可以调用reject(reason)，来表示加载失败。也可以在工厂函数中返回一个Promise，把webpack 2和ES2015语法相结合后，我们就可以使用动态地导入：

import { defineAsyncComponent } from 'vue'
const AsyncComp = defineAsyncComponent(() => 
  import('./components/AsyncComponent.vue')
)
app.component('async-component', AsyncComp)

当在局部注册组件时，也可以使用defineAsyncComponent。

import { createApp, defineAsyncComponent } from 'vue'

createApp({
  components: {
    AsyncComponent: defineAsyncComponent(() =>
      import('./components/AsyncComponent.vue')
    )
   }
})

2.1与Suspense一起使用

异步组件在默认情况下是可挂起的。这意味着如果它在父链中有一个Suspense元素，它将被视为该Suspense元素的异步依赖。在这种情况下，加载状态将由Suspense元素控制，组件自身的加载、错误、延迟和超时选项都将被忽略。异步组件可以选择退出Suspense元素控制，并可以在其选项中指定suspensible:false，让组件始终控制自己的加载状态。

动态组件&异步组件

1.在动态组件上使用keep-alive

2.异步组件

2.1与Suspense一起使用