1×4 精读Vue官方文档 – 动态组件 & 异步组件-一一网

精读 Vue 官方文档系列 ?

keep-alive

<keep-alive> 元素可以缓存组件的状态，避免组件重新渲染。使用时可以与普通组件或 <component> 动态组件一同使用。

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

使用 <keep-alive> 缓存组件状态，被缓存的组件必须要提供一个名称 (name)。

<keep-alive> 组件常用的 Attribute 有以下几个：

include：值是字符串、数组、正则表达式。只有匹配到的组件名称才会被缓存。
exclude：值是字符串、数组、正则表达式。只有没有匹配到的组件才会被缓存。
max：设置缓存的最大条数。

<!-- 逗号分隔字符串 -->
<keep-alive include="a,b">
  <component :is="view"></component>
</keep-alive>
复制代码

keep-alive 以开关的方式来激活被缓存的组件，既同一时刻只有一个子组件会被渲染，如果你在其中添加了多个子元素（比如使用 v-for），那么 keep-alive 将不会工作。

<keep-alive> 在切换缓存的组件时，会触发 keep-alive 树内所有被缓存组件的 activated 与 deactivated 生命周期。

不能在函数式组件中正常工作，因为它们没有缓存实例。

异步组件

搭配 Webpack 的 code-splitting 技术按需加载组件。

全局注册异步组件

Vue.component() 方法不仅可以注册全局组件，还支持通过组件名来获取对应全局组件的实例对象。

//注册全局组件
Vue.component(Button.name, Button);

//获取全局组件构造函数
const AButton = Vue.component(Button.name);
复制代码

当 Vue.component(name, Object | Function) 方法的第二个参数是一个可以返回 Promise 对象的函数时，那么便可以向全局注册一个异步组件。

Vue.component(
    'async-component',
    //这个动态导入会返回一个 Promise 对象。
    ()=>import('./async-component-content')
);
复制代码

局部注册异步组件

与注册普通的局部组件一样，我们会在组件的 components 选项中注册异步组件，同样需要提供一个返回 Promise 对象的函数即可。

{
    components:{
        'async-component':()=>import('./async-component')
    }
}
复制代码

处理加载状态

异步加载组件必然有一个加载过程，并且还会存在加载成功或失败的状态，受网络影响，还需要解决超时等其它情况。

如果我们需要处理异步组件的加载状态，可以使用一个异步组件工厂函数来返回一个格式如下的对象：

const AsyncComponent = () => ({
  // 需要加载的组件 (应该是一个 `Promise` 对象)
  component: import('./MyComponent.vue'),
  // 异步组件加载时使用的组件
  loading: LoadingComponent,
  // 加载失败时使用的组件
  error: ErrorComponent,
  // 展示加载时组件的延时时间。默认值是 200 (毫秒)
  delay: 200,
  // 如果提供了超时时间且组件加载也超时了，
  // 则使用加载失败时使用的组件。默认值是：`Infinity`
  timeout: 3000
})
复制代码