前言：

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

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

1.<Transition>

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

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

<template>
  <div class="app">
    <button @click="show = !show">點(diǎn)擊</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)上面的一個(gè)例子，點(diǎn)擊按鈕文字隱藏，但它不是直接隱藏的，而是opacity的值從1到0經(jīng)過(guò)了0.5s，因此用戶(hù)看到的是文字慢慢的在消失，樣式中.v-enter-active等是什么意思呢？官網(wǎng)這邊給了一張圖就很好理解了。

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

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

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

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

進(jìn)入動(dòng)畫(huà)與結(jié)束動(dòng)畫(huà)的類(lèi)名也要進(jìn)行修改，只需要將v替換成我們?cè)O(shè)置的過(guò)渡效果名：

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

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

2.<TransitionGroup>

用于對(duì) v-for 列表中的元素或組件的插入、移除和順序改變添加動(dòng)畫(huà)效果。

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

• 默認(rèn)情況下，它不會(huì)渲染一個(gè)容器元素。但你可以通過(guò)傳入 tag prop來(lái)指定一個(gè)元素作為容器元素來(lái)渲染。
• 過(guò)渡模式在這里不可用，因?yàn)槲覀儾辉賹?shí)在互斥的元素之間進(jìn)行切換。
• 列表中的每個(gè)元素都必須有一個(gè)獨(dú)一無(wú)二的 key attribute。
• CSS 過(guò)渡 class 會(huì)被應(yīng)用在列表內(nèi)的元素上，而不是容器元素上。
• <TransitionGroup>用作與列表，<Transition>用作于單個(gè)元素。

示例：

<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'時(shí)，會(huì)將其渲染為ul標(biāo)簽，因此可以在其添加li標(biāo)簽列表。

添加動(dòng)畫(huà)樣式

.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í)，下面的數(shù)據(jù)會(huì)有一個(gè)像“讓位置”的操作，但這個(gè)動(dòng)作有點(diǎn)僵硬，因此可以使用.v-move給其添加動(dòng)畫(huà)效果。

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

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

3.<keepAlive>

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

<keepAlive>包裹動(dòng)態(tài)組件時(shí)，會(huì)緩存不活躍的組件實(shí)例，而不是去銷(xiāo)毀它們。

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

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

基本使用

<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)我點(diǎn)擊復(fù)選框時(shí)，會(huì)進(jìn)行組件的切換

home:

User:

當(dāng)我們?cè)趆ome組件中點(diǎn)擊按鈕會(huì)增加數(shù)據(jù)的值，但切換到User組件再切回到home組件中時(shí)，組件會(huì)被從新渲染，因此原本添加的值會(huì)回到初始值，但有些場(chǎng)景下我們不需要組件從新渲染，希望將其緩存起來(lái)，就可以使用到<keepAlive>了，方法很簡(jiǎn)單，只需要用<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)在，在組件切換時(shí)狀態(tài)也能被保留了。

包含/排除

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

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

這樣它就只會(huì)緩存home組件。

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

最大緩存實(shí)例數(shù)

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

如果緩存的實(shí)例數(shù)量即將超過(guò)指定的那個(gè)最大數(shù)量，則最久沒(méi)有被訪問(wèn)的緩存實(shí)例將被銷(xiāo)毀，以便為新的實(shí)例騰出空間。

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

緩存實(shí)例的生命周期

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

activated：

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

deactivated：

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

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('組件被銷(xiāo)毀');
});
</script>

注意事項(xiàng)

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

4.<Teleport>

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

基本使用

Teleport 組件通過(guò) 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ě)了個(gè)很簡(jiǎn)單的示例代碼，點(diǎn)擊按鈕會(huì)出現(xiàn)一個(gè)模態(tài)框，點(diǎn)擊模態(tài)框中的確定按鈕會(huì)隱藏模態(tài)框，這里面就涉及到了組件通信，如果有不懂的可以看看我之前的文章關(guān)于組件通信的——Vue3組件通信

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

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

示例：將彈窗內(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)鍵點(diǎn)說(shuō)明

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

注意事項(xiàng)

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

禁用 Teleport

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

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

<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é)語(yǔ)：

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

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

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

最新評(píng)論