有關(guān)vue 組件切換,動態(tài)組件,組件緩存
背景：
- 在組件化開發(fā)模式下，我們會把整個項目拆分成很多組件，然后按照合理的方式組織起來,達到預期效果
- 因為頁面是多組件組織起來的,這時候自然就存在組件之間的切換問題，Vue中也提出了動態(tài)組件的概念,使得我們可以更好的實現(xiàn)組件之間的切換效果 , 但是vue中組件的切換實際是組件本身重新創(chuàng)建和銷毀的過程,在某些場景下我們并不希望組件被重新創(chuàng)建重新渲染
實際場景: 用戶操作 列表頁-->詳情頁-->列表頁 此時需要達到的預期效果是用戶從詳情頁切換回列表頁的時候原來的頁面保持不變,而不是重新渲染,此時就需要在用戶從列表頁切換到詳情頁的時候?qū)υ瓉淼牧斜眄撨M行緩存
本文主要介紹Vue中組件的切換以及緩存解決方法
一.組件的切換方式
方式一: 使用 v-if和v-else
// 變量flag為true時顯示comp-a組件 ,相反則顯示comp-b組件 <comp-a v-if="flag"></comp-a> <comp-b v-else></comp-b>
方式二:使用內(nèi)置組件:<component></component>
// 點擊切換登錄,注冊,退出組件
<template>
<div>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click.prevent="comName = 'login'">登錄</a>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click.prevent="comName = 'register'">注冊</a>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click.prevent="comName = 'logOut'">退出</a>
// <component></component> 來展示對應名稱的組件,相當于一個占位符
// :is 屬性指定 組件名稱
<component :is="comName"></component>
</div>
</template>
方式三 : vue-router
// 路由規(guī)則:
{
path: '/login',
name: 'login',
component: () => import('../views/login.vue')
},
{
path: '/register',
name: 'register',
component: () => import('../views/register.vue')
},
// 需要展示組件的位置:
<router-view />
二.組件緩存: keep-alive
根據(jù)需求對組件緩存,而不是銷毀重建,正如本文開篇舉例的實際場景
1.keep-alive定義
<keep-alive> 包裹動態(tài)組件時，會緩存不活動的組件實例，而不是銷毀它們。
<keep-alive> 是一個抽象組件：它自身不會渲染一個 DOM 元素，也不會出現(xiàn)在父組件鏈中。 當組件在 <keep-alive> 內(nèi)被切換，它的 activated 和 deactivated 這兩個生命周期鉤子函數(shù)將會被對應執(zhí)行 。
2.keep-alive的生命周期
activated
在 keep-alive 組件激活時調(diào)用 該鉤子函數(shù)在服務器端渲染期間不被調(diào)用
deactivated
在 keep-alive 組件停用時調(diào)用 該鉤子在服務器端渲染期間不被調(diào)用
被包含在 keep-alive 中創(chuàng)建的組件，會多出兩個生命周期的鉤子: activated 與 deactivated
使用 keep-alive 會將數(shù)據(jù)保留在內(nèi)存中，如果要在每次進入頁面的時候獲取最新的數(shù)據(jù)，需要在 activated 階段獲取數(shù)據(jù)，承擔原來 created 鉤子函數(shù)中獲取數(shù)據(jù)的任務。
注意： 只有組件被 keep-alive 包裹時，這兩個生命周期函數(shù)才會被調(diào)用，如果作為正常組件使用，是不會被調(diào)用的，以及在 2.1.0 版本之后，使用 exclude 排除之后，就算被包裹在 keep-alive 中，這兩個鉤子函數(shù)依然不會被調(diào)用！另外，在服務端渲染時，此鉤子函數(shù)也不會被調(diào)用。
設置了緩存的組件：
- 第一次進入：
beforeRouterEnter ->created->…->activated->…->deactivated> beforeRouteLeave - 后續(xù)進入時：
beforeRouterEnter ->activated->deactivated> beforeRouteLeave
三.keep-alive使用方法
1.Props
include - 字符串或數(shù)組,正則表達式。只有名稱匹配的組件會被緩存-->include的值為組件的name。
exclude - 字符串或正則表達式。任何名稱匹配的組件都不會被緩存。
max - 數(shù)字。最多可以緩存多少組件。
2.搭配<component></component>使用
<template>
<div>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click.prevent="comName = 'login'">登錄</a>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click.prevent="comName = 'register'">注冊</a>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click.prevent="comName = 'logOut'">退出</a>
// login組件會被緩存 不設置include會默認緩存所有掛載到<component></component>的組件
// 緩存多個指定組件include = ['login','register']
<keep-alive include="login">
<component :is="comName"></component>
</keep-alive>
</div>
</template>
3.搭配<router-view />路由使用
需配置路由meta信息的keepAlive屬性
keep-alive代碼可以結(jié)合v-if進行包裹，如果meta中的keepAlive為true進行緩存，否側(cè)不進行緩存，這樣可以更靈活一些
{
path: '/login',
name: 'login',
component: () => import('../views/login.vue')
meta:{
keepAlive : true // login組件會被緩存
}
},
{
path: '/register',
name: 'register',
component: () => import('../views/register.vue'),
meta:{
keepAlive : false // register組件不會被緩存
}
},
<router-view />:
<div id="app">
<keep-alive>
<!-- 需要緩存的視圖組件 -->
<router-view v-if="$route.meta.keepAlive"> </router-view>
</keep-alive>
<!-- 不需要緩存的視圖組件 -->
<router-view v-if="!$route.meta.keepAlive"> </router-view>
</div>
4.清除緩存組件
// beforeRouteLeave()鉤子
// 判斷是否要到詳情頁
beforeRouteLeave(to, from, next) {
if (to.path === "/goods_detail") {
from.meta.keepAlive = true;
} else {
from.meta.keepAlive = false;
// this.$destroy()
}
next();
}
到此這篇關(guān)于有關(guān)vue 組件切換,動態(tài)組件,組件緩存的文章就介紹到這了,更多相關(guān)vue組件切換,動態(tài)組件,組件緩存內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue3使用threejs實現(xiàn)3D卡片水平旋轉(zhuǎn)效果的示例代碼
這篇文章主要介紹了在vue3中使用threejs實現(xiàn)3D卡片水平旋轉(zhuǎn)效果,文中通過代碼示例講解的非常詳細,對大家的學習或工作有一定的幫助,需要的朋友可以參考下2024-04-04
本文主要介紹了vue請求接口并且攜帶token的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-07-07
這篇文章主要介紹了VUE安裝和使用vant組件，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
在開發(fā)過程中,啟動項目是必不可少的一步,本文介紹了兩種啟動項目的方法,第一種方法是通過命令提示符(cmd)進入項目目錄,然后輸入npm run serve來啟動項目,第二種方法是直接在項目目錄下打開命令提示符(cmd),輸入npm run serve即可啟動項目2024-10-10
要想實現(xiàn)一個吸頂效果不是很難,網(wǎng)絡上有很多教程,其中有一種就是通過fiexd加top來實現(xiàn),今天突然就想做一個吸頂效果,因為最近都在用vue,所以想用vue來做一個吸頂效果的案例,感興趣的朋友可以參考下2023-11-11
在本文中，我們學習了如何使用 Intersection Observer API 和?defineAsyncComponent?函數(shù)在 Vue 組件可見時對其進行懶加載，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友一起看看吧2023-09-09
這篇文章主要給大家介紹了關(guān)于Vue中slot-scope的深入理解，這個教程非常適合初學者,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-04-04
Vue解決echart在element的tab切換時顯示不正確問題
這篇文章主要介紹了Vue解決echart在element的tab切換時顯示不正確問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要介紹了vue 如何處理防止按鈕重復點擊問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
Vue報錯"Failed?to?resolve?loader:less-loader"的解決方
這篇文章主要給大家介紹了關(guān)于Vue報錯"Failed?to?resolve?loader:less-loader"的解決方法,文中通過圖文介紹的非常詳細,對同樣遇到這樣問題的朋友具有一定的需要的朋友可以參考下2023-02-02