動(dòng)態(tài)組件

在內(nèi)置指令中，有一個(gè)指令is，使用它可以實(shí)現(xiàn)動(dòng)態(tài)組件。
使用動(dòng)態(tài)組件方式：
<component :is="currentView"></component>

示例

dynamic.vue

<template>
  <div style="padding: 30px">
    <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/動(dòng)態(tài)組件/component1';
import component2 from '@/components/動(dòng)態(tài)組件/component2';
import component3 from '@/components/動(dòng)態(tài)組件/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的內(nèi)容
    </div>    
</template>

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

export default defineComponent({
    created() {
        console.log('1已創(chuàng)建');
    },
    beforeUnmount() {
        console.log('1待銷毀');
    },
})
</script>

在動(dòng)態(tài)組件上使用 keep-alive

不知道在上面的例子中，大家有沒有發(fā)現(xiàn)一個(gè)問題，就是當(dāng)組件切換時(shí)，組件會(huì)被銷毀。那么，如果為了提升性能，我能不能在切換的時(shí)候不銷毀組件呢？自然是可以的，就是加上keep-alive。它的功能就是保持組件的狀態(tài)，以避免反復(fù)重渲染導(dǎo)致的性能問題。

這里僅做了了一點(diǎn)變化：

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

dynamic.vue

<template>
  <div style="padding: 30px">
    <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/動(dòng)態(tài)組件/component1';
import component2 from '@/components/動(dòng)態(tài)組件/component2';
import component3 from '@/components/動(dòng)態(tài)組件/component3';

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

異步組件

// TODO
學(xué)習(xí)vue router 時(shí)再完成此部分內(nèi)容