《图解Vue3.0》- 第14节 动态组件和异步组件

动态组件

在内置指令中，有一个指令is，使用它可以实现动态组件。

使用动态组件方式：

​​

​<component :is="currentView"></component>​

​

示例

dynamic.vue

<template>
  <div style="padding:">
    <button @click="change('1')">组件1</button>
    <button @click="change('2')">组件2</button>
    <button @click="change('3')">组件3</button>
    <component :is="componentTag"></component>
  </div>
</template>

<script>import { defineComponent } from '@vue/composition-api';
import component1 from '@/components/动态组件/component1';
import component2 from '@/components/动态组件/component2';
import component3 from '@/components/动态组件/component3';

export default defineComponent({
  components: { component1, component2, component3 },
  data() {
    return {
      componentTag: ''
    }
  },
  methods: {
    change(index) {
      this.componentTag = 'component' + index
    },
  }
})</script>      

compoent1/2/3.vue

<template>
    <div class="container">
        我是组件1的内容
    </div>    
</template>

<script>import { defineComponent } from '@vue/composition-api'

export default defineComponent({
    created() {
        console.log('1已创建');
    },
    beforeUnmount() {
        console.log('1待销毁');
    },
})</script>      

在动态组件上使用 keep-alive

不知道在上面的例子中，大家有没有发现一个问题，就是当组件切换时，组件会被销毁。那么，如果为了提升性能，我能不能在切换的时候不销毁组件呢？自然是可以的，就是加上keep-alive。它的功能就是保持组件的状态，以避免反复重渲染导致的性能问题。

这里仅做了了一点变化：

<keep-alive>
        <component :is="componentTag"></component>
    </keep-alive>      

dynamic.vue

<template>
  <div style="padding:">
    <button @click="change('1')">组件1</button>
    <button @click="change('2')">组件2</button>
    <button @click="change('3')">组件3</button>
    <keep-alive>
        <component :is="componentTag"></component>
    </keep-alive>
  </div>
</template>

<script>import { defineComponent } from '@vue/composition-api';
import component1 from '@/components/动态组件/component1';
import component2 from '@/components/动态组件/component2';
import component3 from '@/components/动态组件/component3';

export default defineComponent({
  components: { component1, component2, component3 },
  data() {
    return {
      componentTag: ''
    }
  },
  methods: {
    change(index) {
      this.componentTag = 'component' + index
    },
  }
})</script>      

异步组件