快捷導(dǎo)航

Vue3中的動態(tài)組件詳解

更新時(shí)間：2025年02月24日 09:07:19 作者：秀秀_heo

本文介紹了Vue3中的動態(tài)組件,通過`<component :is="動態(tài)組件名或組件對象"></component>`來實(shí)現(xiàn)根據(jù)條件動態(tài)渲染不同的組件,此外,還提到了使用`markRaw`和`shallowRef`來優(yōu)化性能,避免不必要的響應(yīng)式劫持

Vue3動態(tài)組件

動態(tài)組件的基本使用

動態(tài)組件（Dynamic Components）是一種在 Vue 中根據(jù)條件或用戶輸入來動態(tài)渲染不同組件的技術(shù)。

在 Vue 中使用動態(tài)組件，可以使用 <component> 元素，并通過 is 特性綁定一個(gè)組件的名稱或組件對象。通過在父組件中改變 is 特性的值，可以動態(tài)切換渲染的組件。

第一種寫法

A.vue

<template>
  <div>
    A component
  </div>
</template>

<script setup lang="ts">

</script>

<style scoped></style>

B.vue， C.vue 同理

APP.vue

<template>
  <div style="display: flex;">
    <!-- class可以寫兩個(gè)，一個(gè)靜態(tài)，一個(gè)動態(tài) -->
    <div @click="switchCom(item, index)" :class="[active == index ? 'active' : '']" class="tabs"
      v-for="(item, index) in data">
      <div>{{ item.name }}</div>
    </div>
  </div>
  <component :is="comId"></component>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import AVue from './components/A.vue'
import BVue from './components/B.vue'
import CVue from './components/C.vue'
// 這里不需要將對象中所有數(shù)據(jù)變?yōu)轫憫?yīng)式，可以使用ref
const comId = ref(AVue)
const active = ref(0)

const switchCom = (item, index) => {
  comId.value = item.com
  active.value = index
}

const data = reactive([
  {
    name: 'A',
    com: AVue
  },
  {
    name: 'B',
    com: BVue
  },
  {
    name: 'C',
    com: CVue
  }
])
</script>

<style lang="scss" scoped>
.active {
  background: blueviolet;
}

.tabs {
  border: 1px solid #ccc;
  padding: 5px 10px;
  margin: 5px;
  cursor: pointer;

}
</style>

第二種寫法

APP.vue

<template>
  <div style="display: flex;">
    <!-- class可以寫兩個(gè)，一個(gè)靜態(tài)，一個(gè)動態(tài) -->
    <div @click="switchCom(item, index)" :class="[active == index ? 'active' : '']" class="tabs"
      v-for="(item, index) in data">
      <div>{{ item.name }}</div>
    </div>
  </div>
  <component :is="comId"></component>
</template>

<script setup lang="ts">
// markRaw：作用：標(biāo)記一個(gè)對象，使其永遠(yuǎn)不會再成為響應(yīng)式對象。
import { ref, reactive, markRaw, shallowRef } from 'vue';

// 這里不需要將對象中所有數(shù)據(jù)變?yōu)轫憫?yīng)式，可以使用ref
const comId = shallowRef('AVue')
const active = ref(0)

const switchCom = (item, index) => {
  comId.value = item.com
  console.log(comId.value);
  
  active.value = index
}

const data = reactive([
  {
    name: 'A',
    com:'AVue'
  },
  {
    name: 'B',
    com:'BVue'
  },
  {
    name: 'C',
    com:'CVue'
  }
])
</script>

<script lang="ts">
import AVue from './components/A.vue'
import BVue from './components/B.vue'
import CVue from './components/C.vue'

export default {
  components: {
    AVue,
    BVue,
    CVue
  }
}
</script>

<style lang="scss" scoped>
.active {
  background: blueviolet;
}

.tabs {
  border: 1px solid #ccc;
  padding: 5px 10px;
  margin: 5px;
  cursor: pointer;

}
</style>

性能優(yōu)化

上述第一種寫法代碼會出現(xiàn)警告

輸出 comId 的值，出現(xiàn) comId 的屬性被劫持，出現(xiàn)性能浪費(fèi)

解決方法

使用markRaw和shallowRef這兩個(gè)API

App.vue

<template>
  <div style="display: flex;">
    <!-- class可以寫兩個(gè)，一個(gè)靜態(tài)，一個(gè)動態(tài) -->
    <div @click="switchCom(item, index)" :class="[active == index ? 'active' : '']" class="tabs"
      v-for="(item, index) in data">
      <div>{{ item.name }}</div>
    </div>
  </div>
  <component :is="comId"></component>
</template>

<script setup lang="ts">
// markRaw：作用：標(biāo)記一個(gè)對象，使其永遠(yuǎn)不會再成為響應(yīng)式對象。
import { ref, reactive, markRaw, shallowRef } from 'vue';
import AVue from './components/A.vue'
import BVue from './components/B.vue'
import CVue from './components/C.vue'
// 這里不需要將對象中所有數(shù)據(jù)變?yōu)轫憫?yīng)式，可以使用ref
const comId = shallowRef(AVue)
const active = ref(0)

const switchCom = (item, index) => {
  comId.value = item.com
  console.log(comId.value);
  
  active.value = index
}

const data = reactive([
  {
    name: 'A',
    com: markRaw(AVue)
  },
  {
    name: 'B',
    com: markRaw(BVue)
  },
  {
    name: 'C',
    com: markRaw(CVue)
  }
])
</script>

<style lang="scss" scoped>
.active {
  background: blueviolet;
}

.tabs {
  border: 1px solid #ccc;
  padding: 5px 10px;
  margin: 5px;
  cursor: pointer;

}
</style>

再次輸出 comId 的值，解決性能浪費(fèi)的問題