《圖解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>      

異步元件