Vue2-动态组件component和keep-alive

1# component 标签

component 是 Vue 的内置标签，可作为组件的占位符，配合 v-bind:is 或 :is 可以实现组件的动态切换。

<template>
  <div>
    <component v-bind:is="name"></component>
    <button v-on:click="toggle(name)">切换组件</button>
  </div>
</template>

<script>
import a from './ComponentA.vue';
import b from './ComponentB.vue';

export default {
  data() {
    return {
      name: 'a',
    }
  },
  components: { a, b },
  methods: {
    toggle(name) {
      this.name = name === 'a' ? 'b' : 'a';
    },
  },
}
</script>

2# keep-alive

keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁。 只有当组件被 keep-alive 标签包裹时，才会调用 activated 和 deactivated 这两个生命周期函数。

• activated 会在 keep-alive 组件激活时调用，但在服务器端渲染期间不被调用。
• deactivated 会在 keep-alive 组件停用时调用，但在服务器端渲染期间不被调用。

2.1 直接使用 keep-alive

<keep-alive>
    <route-view />
</keep-alive>

2.2 keep-alive 配合 includes 与 excludes

<keep-alive include="">
     <route-view />
</keep-alive>

2.3 keep-alive 配合 meta 属性

// router/index.js  
{
	path: '/a',
	component: () => import('./ComponentA.vue'),
	meta: { keepalive: true },
	path: '/b',
	component: () => import('./ComponentB.vue'),
}

<keep-alive>
	<router-view v-if="$route.meta.keepalive" />
</keep-alive>
<router-view v-if="!$route.meta.keepalive" />