一文詳解Vue3內置組件的使用
前言：
vue3作為當前主流的前端框架之一，其內置組件體系為開發(fā)者提供了高效、靈活的解決方案。這些組件不僅簡化了常見功能的開發(fā)流程，還通過組合式API和性能優(yōu)化進一步提升開發(fā)體驗。
建議通過官方文檔獲取最準確的信息，避免第三方解讀帶來的偏差。官方資源通常包含最新更新和完整細節(jié)，確保學習內容的權威性。官網地址：vue3內置組件
1.<Transition>
熟悉css動畫的就可以看出這跟過渡動畫有關，官網也說明了它可以為單個元素或組件提供動畫過渡的效果。它可以將進入和離開動畫應用到通過默認插槽傳遞給它的元素或組件上進入或離開可以由以下的條件之一觸發(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>這就是官網上面的一個例子，點擊按鈕文字隱藏，但它不是直接隱藏的，而是opacity的值從1到0經過了0.5s，因此用戶看到的是文字慢慢的在消失，樣式中.v-enter-active等是什么意思呢？官網這邊給了一張圖就很好理解了。
Enter表示進入，Leave表示離開。
v-enter-from表示進入動畫的起始狀態(tài)，配合上面的例子就很好理解了，開始起始狀態(tài)的透明度為0，到進入動畫的結束狀態(tài)也就是v-enter-to的透明度變?yōu)?，這個過程就是v-enter-active，因此我們需要在這個過程中設置動畫時間以及過渡的速度，就比如上面設置的ease表示從快到慢過渡。理解了進入，離開也就同理了。
但了解這個還遠遠不夠，也無法應對項目中的所有場景，當我們的項目中需要多個transition內置組件并它們的動畫效果不同時，因此需要給每個transition組件定義一個名字，好將它們區(qū)分開來，避免樣式混淆，只需要在transition內置組件上添加一個name屬性，給它一個名稱，代碼如下：
<transition name="fade">
<div v-if="show">hello</div>
</transition>進入動畫與結束動畫的類名也要進行修改，只需要將v替換成我們設置的過渡效果名：
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.5s ease;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}2.<TransitionGroup>
用于對 v-for 列表中的元素或組件的插入、移除和順序改變添加動畫效果。
<TransitionGroup>內置組件和<Transition>內置組件一樣都是添加動畫效果，擁有相同的props和特定的CSS class選擇器以及相同的JavaScript鉤子函數(shù)，它們的區(qū)別如下：
- 默認情況下，它不會渲染一個容器元素。但你可以通過傳入 tag prop來指定一個元素作為容器元素來渲染。
- 過渡模式在這里不可用，因為我們不再實在互斥的元素之間進行切換。
- 列表中的每個元素都必須有一個獨一無二的 key attribute。
- CSS 過渡 class 會被應用在列表內的元素上，而不是容器元素上。
- <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標簽，因此可以在其添加li標簽列表。
添加動畫樣式
.list-move,
.list-enter-active,
.list-leave-active {
transition: all 1s ease;
}
.list-enter-from,
.list-leave-to {
opacity: 0;
transform: translateX(30px);
}當我們往數(shù)據(jù)前面添加數(shù)據(jù)時，下面的數(shù)據(jù)會有一個像“讓位置”的操作，但這個動作有點僵硬，因此可以使用.v-move給其添加動畫效果。
但是當我們刪除數(shù)據(jù)時，下面的數(shù)據(jù)會在上面的數(shù)據(jù)刪除后立馬向上去“占位置”，當我們也希望這樣有一個過渡的動畫效果時，就需要在.list-leave-active中添加position: absolute;，就是需要在離開的過程中，讓其脫離文檔流，這樣做的原因是方便瀏覽器正確的計算移動的動畫。
.list-leave-active{
position: absolute;
}3.<keepAlive>
它的功能是在多個組件間動態(tài)切換時緩存被移除的組件實例.
<keepAlive>包裹動態(tài)組件時，會緩存不活躍的組件實例，而不是去銷毀它們。
任何時候都只能有一個活躍組件實例作為<keepAlive>的直接子節(jié)點。
當一個組件在<keepAlive>中被切換時，它的activated和deactivated生命周期鉤子將被調用，這兩個生命周期是<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>當我點擊復選框時，會進行組件的切換
home:
User:
當我們在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>默認會緩存內部的所有組件實例，可能有些情況下我們不需要包含的所有組件實例都被緩存，可以通過 包含（include）和 排除（exclude）prop來定制該行為。這兩個prop的值都可以是一個以是一個以英文逗號分隔的字符串、一個正則表達式，或是包含這兩種類型的一個數(shù)組：
<keep-alive include="home">
<component :is="componentId"></component>
</keep-alive>這樣它就只會緩存home組件。
在 Vue3.2.34 或以上的版本中，使用 <script setup> 的單文件組件會自動根據(jù)文件名生成對應的 name 選項，無需再手動聲明。
最大緩存實例數(shù)
可以通過傳入 max prop來限制可被緩存的最大組件實例數(shù)。
如果緩存的實例數(shù)量即將超過指定的那個最大數(shù)量，則最久沒有被訪問的緩存實例將被銷毀，以便為新的實例騰出空間。
<keep-alive :max="10">
<component :is="componentId"></component>
</keep-alive>緩存實例的生命周期
在 Vue.js 的<keep-alive>組件中，被緩存的組件實例會經歷特定的生命周期鉤子，這些鉤子與普通組件的生命周期有所不同。以下是緩存實例的完整生命周期：
activated：
當緩存組件被激活（從緩存中重新插入到 DOM 中）時觸發(fā)。適合在此鉤子中執(zhí)行需要恢復的操作，例如重新加載數(shù)據(jù)或啟動定時器。
deactivated：
當緩存組件被銷毀（從 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ā) activated 鉤子，而不會觸發(fā) mounted。
- 當緩存實例數(shù)量超過 max 限制時，最久未被訪問的實例會被銷毀，其 destroyed 鉤子會被觸發(fā)
- 這兩個鉤子不僅適用于<keep-alive>緩存的根組件，也適用于緩存樹中的后代組件。
4.<Teleport>
Teleport 是 Vue.js 3 中引入的一個內置組件，允許將子節(jié)點渲染到 DOM 樹中的其他位置，而不受父組件層級結構的限制。這在處理模態(tài)框、通知、彈出菜單等需要脫離當前 DOM 結構的場景時非常有用。
基本使用
Teleport 組件通過 to 屬性指定目標容器，目標容器可以是 DOM 選擇器字符串或實際的 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)框，這里面就涉及到了組件通信，如果有不懂的可以看看我之前的文章關于組件通信的——Vue3組件通信
打開控制臺可以看到模態(tài)框的位置
在 Vue 3 中，<Teleport>件可用于將模板中的內容渲染到 DOM 的其他位置，而不受父組件層級的限制。
示例：將彈窗內容移至 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>關鍵點說明
- to 屬性指定目標容器，可以是 CSS 選擇器（如#app、.container）或 DOM 元素（如 body）。
- 被<teleport> 包裹的內容仍保持 Vue 的響應式特性，事件和邏輯不受影響。
- 適合處理模態(tài)框、通知提示等需要脫離當前組件層級的場景。
注意事項
- 確保目標容器在 DOM 中已存在，否則內容無法正確掛載。
- 動態(tài)修改 to 屬性可實現(xiàn)內容在不同容器間切換。
禁用 Teleport
在某些場景中，可能需要根據(jù)特定條件禁用 Teleport 功能。例如，針對不同設備或布局需求，動態(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>結語：
在vue3中其實還有一個內置組件<Suspense>，為什么在這里沒有介紹呢？那是因為作為內置組件未被詳細介紹，主要原因是其當前仍處于實驗性階段。官方明確聲明該功能尚未穩(wěn)定，未來API可能發(fā)生變更，故不推薦在生產環(huán)境中依賴這一特性。
隨著 Vue 生態(tài)的不斷發(fā)展，掌握這些核心組件將有助于開發(fā)更靈活、高效的前端應用。建議結合官方文檔和實際項目實踐，深入理解其使用場景和最佳實踐。
到此這篇關于Vue3內置組件的使用的文章就介紹到這了,更多相關Vue3內置組件內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
本文主要介紹了Vue.js項目在apache服務器部署問題解決，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-06-06
今天小編就為大家分享一篇element UI upload組件上傳附件格式限制方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue3使用Pinia修改state的三種方法(直接修改，$patch，actions)
Vue3?Pinia是一個狀態(tài)管理庫,專門為Vue3設計優(yōu)化,它提供了一種簡單而強大的方式來管理應用程序的狀態(tài),并且與Vue3的響應式系統(tǒng)緊密集成,本文給大家介紹了vue3使用Pinia修改state的三種方法,需要的朋友可以參考下2024-03-03
這篇文章主要給大家介紹了關于vue源碼之批量異步更新策略的相關資料，關于vue異步更新是我們日常開發(fā)中經常遇到的一個功能，需要的朋友可以參考下2021-05-05
這篇文章主要為大家詳細介紹了vue前端信息詳情頁模板梳理，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
Vue+ElementUI實現(xiàn)從后臺動態(tài)填充下拉框的示例代碼
本文主要介紹了Vue+ElementUI實現(xiàn)從后臺動態(tài)填充下拉框的示例代碼，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-02-02
這篇文章主要為大家介紹了圖解Vue的響應式原理，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
vue 在methods中調用mounted的實現(xiàn)操作
這篇文章主要介紹了vue 在methods中調用mounted的實現(xiàn)操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要介紹了Vue中如何對ElementUI的Dialog組件封裝問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
在vue中會將常用的組件進行封裝,下面這篇文章主要給大家介紹了關于Vue組件封裝之input輸入框的相關資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2022-10-10