一文詳解Vue3內(nèi)置組件的使用

更新時間：2025年09月08日 09:04:16 作者：whhhhhhhhhw

Vue3內(nèi)置組件是一組預(yù)定義的組件,直接嵌入框架,無需手動導(dǎo)入即可在模板中使用,下面這篇文章主要介紹了Vue3內(nèi)置組件使用的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言：

vue3作為當(dāng)前主流的前端框架之一，其內(nèi)置組件體系為開發(fā)者提供了高效、靈活的解決方案。這些組件不僅簡化了常見功能的開發(fā)流程，還通過組合式API和性能優(yōu)化進(jìn)一步提升開發(fā)體驗。

建議通過官方文檔獲取最準(zhǔn)確的信息，避免第三方解讀帶來的偏差。官方資源通常包含最新更新和完整細(xì)節(jié)，確保學(xué)習(xí)內(nèi)容的權(quán)威性。官網(wǎng)地址：vue3內(nèi)置組件

1.<Transition>

熟悉css動畫的就可以看出這跟過渡動畫有關(guān)，官網(wǎng)也說明了它可以為單個元素或組件提供動畫過渡的效果。它可以將進(jìn)入和離開動畫應(yīng)用到通過默認(rèn)插槽傳遞給它的元素或組件上進(jìn)入或離開可以由以下的條件之一觸發(fā)：

由v-if觸發(fā)
由v-show觸發(fā)
由特殊元素<component>切換的動態(tài)組件
改變特殊的key屬性

<template>
  <div class="app">
    <button @click="show = !show">點擊</button>
    <transition>
      <div v-if="show">hello</div>
    </transition>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const show = ref(true)
</script>

<style scoped>
.v-enter-active,
.v-leave-active {
  transition:opacity 0.5s ease;
}
.v-enter-from,
.v-leave-to {
  opacity: 0;
}
</style>

這就是官網(wǎng)上面的一個例子，點擊按鈕文字隱藏，但它不是直接隱藏的，而是opacity的值從1到0經(jīng)過了0.5s，因此用戶看到的是文字慢慢的在消失，樣式中.v-enter-active等是什么意思呢？官網(wǎng)這邊給了一張圖就很好理解了。

Enter表示進(jìn)入，Leave表示離開。

v-enter-from表示進(jìn)入動畫的起始狀態(tài)，配合上面的例子就很好理解了，開始起始狀態(tài)的透明度為0，到進(jìn)入動畫的結(jié)束狀態(tài)也就是v-enter-to的透明度變?yōu)?，這個過程就是v-enter-active，因此我們需要在這個過程中設(shè)置動畫時間以及過渡的速度，就比如上面設(shè)置的ease表示從快到慢過渡。理解了進(jìn)入，離開也就同理了。

但了解這個還遠(yuǎn)遠(yuǎn)不夠，也無法應(yīng)對項目中的所有場景，當(dāng)我們的項目中需要多個transition內(nèi)置組件并它們的動畫效果不同時，因此需要給每個transition組件定義一個名字，好將它們區(qū)分開來，避免樣式混淆，只需要在transition內(nèi)置組件上添加一個name屬性，給它一個名稱，代碼如下：

    <transition name="fade">
      <div v-if="show">hello</div>
    </transition>

進(jìn)入動畫與結(jié)束動畫的類名也要進(jìn)行修改，只需要將v替換成我們設(shè)置的過渡效果名：

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

2.<TransitionGroup>

用于對 v-for 列表中的元素或組件的插入、移除和順序改變添加動畫效果。

<TransitionGroup>內(nèi)置組件和<Transition>內(nèi)置組件一樣都是添加動畫效果，擁有相同的props和特定的CSS class選擇器以及相同的JavaScript鉤子函數(shù)，它們的區(qū)別如下：

默認(rèn)情況下，它不會渲染一個容器元素。但你可以通過傳入 tag prop來指定一個元素作為容器元素來渲染。
過渡模式在這里不可用，因為我們不再實在互斥的元素之間進(jìn)行切換。
列表中的每個元素都必須有一個獨一無二的 key attribute。
CSS 過渡 class 會被應(yīng)用在列表內(nèi)的元素上，而不是容器元素上。
<TransitionGroup>用作與列表，<Transition>用作于單個元素。

示例：

<template>
  <div class="app">
    <button @click="addItem">Add</button>
    <transition-group name="list" tag="ul">
      <li v-for="item in items" :key="item.id">
        {{ item.value }}
        <button @click="deleteItem(item.id)">Delete</button>
      </li>
    </transition-group>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const items = ref([
  { id: 1, value: 1 },
  { id: 2, value: 2 },
  { id: 3, value: 3 }
]);

// 添加
function addItem() {
  items.value.unshift({
    id: Date.now(),
    value: Math.floor(Math.random() * 11)
  });
}

// 刪除
function deleteItem(id) {
  items.value = items.value.filter(item => item.id !== id);
}

</script>

tag='ul'時，會將其渲染為ul標(biāo)簽，因此可以在其添加li標(biāo)簽列表。

添加動畫樣式

.list-move,
.list-enter-active,
.list-leave-active {
  transition: all 1s ease;
}

.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

當(dāng)我們往數(shù)據(jù)前面添加數(shù)據(jù)時，下面的數(shù)據(jù)會有一個像“讓位置”的操作，但這個動作有點僵硬，因此可以使用.v-move給其添加動畫效果。

但是當(dāng)我們刪除數(shù)據(jù)時，下面的數(shù)據(jù)會在上面的數(shù)據(jù)刪除后立馬向上去“占位置”，當(dāng)我們也希望這樣有一個過渡的動畫效果時，就需要在.list-leave-active中添加position: absolute;，就是需要在離開的過程中，讓其脫離文檔流，這樣做的原因是方便瀏覽器正確的計算移動的動畫。

.list-leave-active{
  position: absolute;
}

3.<keepAlive>

它的功能是在多個組件間動態(tài)切換時緩存被移除的組件實例.

<keepAlive>包裹動態(tài)組件時，會緩存不活躍的組件實例，而不是去銷毀它們。

任何時候都只能有一個活躍組件實例作為<keepAlive>的直接子節(jié)點。

當(dāng)一個組件在<keepAlive>中被切換時，它的activated和deactivated生命周期鉤子將被調(diào)用，這兩個生命周期是<keepAlive>特有的，用來替代mounted和unmounted。這適用于<keepAlive>的直接子節(jié)點及其所有子孫節(jié)點。

基本使用

<template>
  <div class="app">
    <label><input type="radio" v-model="componentId" :value="home">home</label>
    <label><input type="radio" v-model="componentId" :value="User">User</label>
    <component :is="componentId"></component>
  </div>
</template>

<script setup>
import { shallowRef } from 'vue';
import home from './components/home.vue';
import User from './components/User.vue';

const componentId = shallowRef(home);
</script>

當(dāng)我點擊復(fù)選框時，會進(jìn)行組件的切換

home:

User:

當(dāng)我們在home組件中點擊按鈕會增加數(shù)據(jù)的值，但切換到User組件再切回到home組件中時，組件會被從新渲染，因此原本添加的值會回到初始值，但有些場景下我們不需要組件從新渲染，希望將其緩存起來，就可以使用到<keepAlive>了，方法很簡單，只需要用<keepAlive>包裹需要切換的組件即可。

<template>
  <div class="app">
    <label><input type="radio" v-model="componentId" :value="home">home</label>
    <label><input type="radio" v-model="componentId" :value="User">User</label>
    <keep-alive>
      <component :is="componentId"></component>
    </keep-alive>
  </div>
</template>

現(xiàn)在，在組件切換時狀態(tài)也能被保留了。

包含/排除

因為<keepAlive>默認(rèn)會緩存內(nèi)部的所有組件實例，可能有些情況下我們不需要包含的所有組件實例都被緩存，可以通過 包含（include）和 排除（exclude）prop來定制該行為。這兩個prop的值都可以是一個以是一個以英文逗號分隔的字符串、一個正則表達(dá)式，或是包含這兩種類型的一個數(shù)組：

    <keep-alive include="home">
      <component :is="componentId"></component>
    </keep-alive>

這樣它就只會緩存home組件。

在 Vue3.2.34 或以上的版本中，使用 <script setup> 的單文件組件會自動根據(jù)文件名生成對應(yīng)的 name 選項，無需再手動聲明。

最大緩存實例數(shù)

可以通過傳入 max prop來限制可被緩存的最大組件實例數(shù)。

如果緩存的實例數(shù)量即將超過指定的那個最大數(shù)量，則最久沒有被訪問的緩存實例將被銷毀，以便為新的實例騰出空間。

    <keep-alive :max="10">
      <component :is="componentId"></component>
    </keep-alive>

緩存實例的生命周期

在 Vue.js 的<keep-alive>組件中，被緩存的組件實例會經(jīng)歷特定的生命周期鉤子，這些鉤子與普通組件的生命周期有所不同。以下是緩存實例的完整生命周期：

activated：

當(dāng)緩存組件被激活（從緩存中重新插入到 DOM 中）時觸發(fā)。適合在此鉤子中執(zhí)行需要恢復(fù)的操作，例如重新加載數(shù)據(jù)或啟動定時器。

deactivated：

當(dāng)緩存組件被銷毀（從 DOM 中移除并存入緩存）時觸發(fā)。適合在此鉤子中執(zhí)行清理操作，例如清除定時器或取消未完成的請求。

home.vue:

<template>
    <div class="home">
        <button @click="num++">Add</button>
        <p>{{ num }}</p>
    </div>
</template>

<script setup>
import { ref, onActivated, onDeactivated } from 'vue'
const num = ref(0)

onActivated(() => {
  console.log('組件被激活');
});

onDeactivated(() => {
  console.log('組件被銷毀');
});
</script>

注意事項

緩存組件的 created 和 mounted 鉤子僅在首次加載時觸發(fā)，后續(xù)激活時不會重復(fù)觸發(fā)。
如果組件被緩存后再次激活，只會觸發(fā) activated 鉤子，而不會觸發(fā) mounted。
當(dāng)緩存實例數(shù)量超過 max 限制時，最久未被訪問的實例會被銷毀，其 destroyed 鉤子會被觸發(fā)
這兩個鉤子不僅適用于<keep-alive>緩存的根組件，也適用于緩存樹中的后代組件。

4.<Teleport>

Teleport 是 Vue.js 3 中引入的一個內(nèi)置組件，允許將子節(jié)點渲染到 DOM 樹中的其他位置，而不受父組件層級結(jié)構(gòu)的限制。這在處理模態(tài)框、通知、彈出菜單等需要脫離當(dāng)前 DOM 結(jié)構(gòu)的場景時非常有用。

基本使用

Teleport 組件通過 to 屬性指定目標(biāo)容器，目標(biāo)容器可以是 DOM 選擇器字符串或?qū)嶋H的 DOM 元素。

App.vue:

<template>
  <div class="app">
    <button @click="showMsg = true">Click me</button>
    <div>
      <MessageBox msg="Hello World" v-model:showMsg="showMsg"/>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import MessageBox from './components/MessageBox.vue';
const showMsg = ref(false);
</script>

MessageBox.vue:

<template>
    <div class="message" v-if="showMsg">
        <div class="message_box">
            <div class="message_box_text">{{ msg }}</div>
            <div class="message_box_button">
                <el-button type="primary" @click="handleClick">確定</el-button>
            </div>
        </div>
    </div>
</template>

<script setup>

const { msg, showMsg } = defineProps({
    msg: String,
    showMsg: Boolean
})

const emit = defineEmits(['update:showMsg'])
function handleClick() {
    emit('update:showMsg', false)
}
</script>

<style scoped lang="less">
.message {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, .4);

    .message_box {
        padding: 0 10px;
        width: 300px;
        height: 150px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: #fff;
        border-radius: 20px;
        display: flex;
        flex-direction: column;
        overflow: hidden;

        .message_box_text {
            flex: 0 0 80px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .message_box_button {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }
}
</style>

這邊我寫了個很簡單的示例代碼，點擊按鈕會出現(xiàn)一個模態(tài)框，點擊模態(tài)框中的確定按鈕會隱藏模態(tài)框，這里面就涉及到了組件通信，如果有不懂的可以看看我之前的文章關(guān)于組件通信的——Vue3組件通信

打開控制臺可以看到模態(tài)框的位置

在 Vue 3 中，<Teleport>件可用于將模板中的內(nèi)容渲染到 DOM 的其他位置，而不受父組件層級的限制。

示例：將彈窗內(nèi)容移至 body 元素下

<template>
    <teleport to='body'>
        <div class="message" v-if="showMsg">
            <div class="message_box">
                <div class="message_box_text">{{ msg }}</div>
                <div class="message_box_button">
                    <el-button type="primary" @click="handleClick">確定</el-button>
                </div>
            </div>
        </div>
    </teleport>
</template>

關(guān)鍵點說明

to 屬性指定目標(biāo)容器，可以是 CSS 選擇器（如#app、.container）或 DOM 元素（如 body）。
被<teleport> 包裹的內(nèi)容仍保持 Vue 的響應(yīng)式特性，事件和邏輯不受影響。
適合處理模態(tài)框、通知提示等需要脫離當(dāng)前組件層級的場景。

注意事項

確保目標(biāo)容器在 DOM 中已存在，否則內(nèi)容無法正確掛載。
動態(tài)修改 to 屬性可實現(xiàn)內(nèi)容在不同容器間切換。

禁用 Teleport

在某些場景中，可能需要根據(jù)特定條件禁用 Teleport 功能。例如，針對不同設(shè)備或布局需求，動態(tài)控制組件的位置。

我們可以通過對<Teleport>態(tài)地傳入一個 disabled prop 來處理這兩種不同情況。

<template>
    <teleport to='body' :disabled="showMsg">
        <div class="message" v-if="showMsg">
            <div class="message_box">
                <div class="message_box_text">{{ msg }}</div>
                <div class="message_box_button">
                    <el-button type="primary" @click="handleClick">確定</el-button>
                </div>
            </div>
        </div>
    </teleport>
</template>

結(jié)語：

在vue3中其實還有一個內(nèi)置組件<Suspense>，為什么在這里沒有介紹呢？那是因為作為內(nèi)置組件未被詳細(xì)介紹，主要原因是其當(dāng)前仍處于實驗性階段。官方明確聲明該功能尚未穩(wěn)定，未來API可能發(fā)生變更，故不推薦在生產(chǎn)環(huán)境中依賴這一特性。

隨著 Vue 生態(tài)的不斷發(fā)展，掌握這些核心組件將有助于開發(fā)更靈活、高效的前端應(yīng)用。建議結(jié)合官方文檔和實際項目實踐，深入理解其使用場景和最佳實踐。

到此這篇關(guān)于Vue3內(nèi)置組件的使用的文章就介紹到這了,更多相關(guān)Vue3內(nèi)置組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: