动态组件

在动态组件上使用 keep-alive

在线示例

当在这些组件之间切换的时候，你有时会想保持这些组件的状态，以避免反复重渲染导致的性能问题。
例如我们来展开说一说这个多标签界面：

你会注意到，如果你选择了一篇文章，切换到 Archive 标签，然后再切换回 Posts，会继续展示你之前选择的文章的。
这就是<keep-alive>的功劳，它可以在组件切换的时候缓存当前组件的状态，等到再次进入这个组件不需要重新创建组件，使得性能提升。

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

异步组件

在线示例
ps: 示例佐证有点牵强，待后续深入了解后再更新。

可参考这篇文章自行验证 vue异步组件(高级异步组件)使用场景及实践

在大型应用中，我们可能需要将应用分割成小一些的代码块，并且只在需要的时候才从服务器加载一个模块。为了简化，Vue 允许你以一个工厂函数的方式定义你的组件，这个工厂函数会异步解析你的组件定义。Vue 只有在这个组件需要被渲染的时候才会触发该工厂函数，且会把结果缓存起来供未来重渲染。

你也可以在工厂函数中返回一个 Promise，所以把 webpack 2 和 ES2015 语法加在一起，我们可以这样使用动态导入：

Vue.component(
  'AsyncComponent1',
  // 这个动态导入会返回一个 `Promise` 对象。
  () => import('./async-component1')
)

完整示例如下：

<template>
  <div>
    异步组件测试，同步组件总是先load, 而异步组件在加载完成。

    <SyncComponent1 />
    <AsyncComponent2 />
    <SyncComponent2 />
  </div>
</template>

<script>
import Vue from "vue";
import SyncComponent2 from "./sync-component2";
import SyncComponent1 from "./sync-component1";

const AsyncComponent2 = Vue.component(
  "AsyncComponent2",
  // 这个动态导入会返回一个 `Promise` 对象。
  () => import("./async-component2")
);

export default {
  name: "DynamicComponentDemo",
  components: {
    SyncComponent1,
    AsyncComponent2,
    SyncComponent2,
  },
  data() {
    return {};
  },
  methods: {},
};
</script>

<style scoped>
</style>

我们故意调整了组件的顺序，但是通过控制台我们看到日志输出顺序总是同步组件先加载完成。

– end –