vue3動態(tài)路由+動態(tài)組件+緩存應(yīng)用方式
Vue3 案例復(fù)現(xiàn)(動態(tài)注冊組件及路由重定向)
1. 項目結(jié)構(gòu)
假設(shè)項目有src
目錄,src
目錄下包含views
(存放組件)、router
(存放路由相關(guān)文件)和store
(用于狀態(tài)管理,這里假設(shè)使用 Vuex)。
2. Vuex 存儲相關(guān)信息(src/store/index.js)
import { createStore } from 'vuex'; const store = createStore({ state: { userRole: null, // 存儲用戶角色,如 'user' 或 'admin' permissions: [] // 存儲用戶權(quán)限列表 }, mutations: { SET_USER_ROLE(state, role) { state.userRole = role; }, SET_PERMISSIONS(state, perms) { state.permissions = perms; } }, actions: { setUserRole({ commit }, role) { commit('SET_USER_ROLE', role); }, setPermissions({ commit }, perms) { commit('SET_PERMISSIONS', perms); } } }); export default store;
3. 動態(tài)注冊組件示例(src/router/index.js)
import { createRouter, createWebHistory } from 'vue-router'; import store from '../store'; import Home from '../views/Home.vue'; import Login from '../views/Login.vue'; // 動態(tài)導(dǎo)入組件函數(shù) const loadComponent = (path) => () => import(`../views/${path}.vue`); const router = createRouter({ history: createWebHistory(), routes: [ { path: '/', redirect: '/login' }, { path: '/login', component: Login }, { path: '/home', component: Home } ] }); // 模擬獲取用戶角色和權(quán)限后動態(tài)注冊路由 const updateRoutes = () => { const userRole = store.state.userRole; const newRoutes = []; if (userRole === 'admin') { newRoutes.push({ path: '/admin/dashboard', component: loadComponent('AdminDashboard') }); } if (userRole === 'user') { newRoutes.push({ path: '/user/profile', component: loadComponent('UserProfile') }); } router.addRoute(...newRoutes); }; // 路由守衛(wèi),在每次路由變化前檢查用戶角色和權(quán)限,更新路由 router.beforeEach((to, from, next) => { const userRole = store.state.userRole; if (!userRole && to.path!== '/login') { next('/login'); } else { if (userRole) { updateRoutes(); } next(); } }); export default router;
4. 登錄組件(src/views/Login.vue)
<template> <div> <h2>Login</h2> <input type="text" v-model="username" placeholder="Username" /> <input type="password" v-model="password" placeholder="Password" /> <button @click="login">Login</button> </div> </template> <script> import { useStore } from 'vuex'; export default { data() { return { username: '', password: '' }; }, methods: { login() { const store = useStore(); // 模擬登錄驗證,這里簡單假設(shè)用戶名為 'admin' 時是管理員角色 if (this.username === 'admin') { store.dispatch('setUserRole', 'admin'); store.dispatch('setPermissions', ['admin:dashboard']); } else { store.dispatch('setUserRole', 'user'); store.dispatch('setPermissions', ['user:profile']); } } } }; </script>
在這個示例中:
- 通過 Vuex 存儲用戶角色和權(quán)限信息。
- 在路由模塊中,
loadComponent
函數(shù)用于動態(tài)導(dǎo)入組件。updateRoutes
函數(shù)根據(jù)用戶角色動態(tài)添加路由。 - 路由守衛(wèi)
beforeEach
在每次路由變化前檢查用戶狀態(tài),如果用戶未登錄且不是訪問登錄頁,則重定向到登錄頁。如果用戶已登錄,則根據(jù)用戶角色更新路由,實現(xiàn)動態(tài)注冊組件和動態(tài)控制路由重定向。實際應(yīng)用中,可以從后端獲取真實的用戶角色和權(quán)限數(shù)據(jù)。
動態(tài)組件
動態(tài)組件基礎(chǔ)概念
- 在Vue 3中,動態(tài)組件允許你根據(jù)數(shù)據(jù)的變化動態(tài)地切換顯示的組件。
- 這是通過
<component>
標(biāo)簽來實現(xiàn)的,它有一個特殊的屬性:is
,這個屬性的值可以是一個組件選項對象(例如,通過import
導(dǎo)入的組件)或者組件的名字(如果組件是通過app.component()
方法全局注冊的)。
簡單的動態(tài)組件示例
- 創(chuàng)建組件
首先,在src/views
目錄下創(chuàng)建幾個組件,例如Home.vue
、Profile.vue
和Admin.vue
。
以Home.vue
為例:
<template> <div> <h2>Home Page</h2> </div> </template> <script> export default { name: 'Home' }; </script>
- 在父組件中使用動態(tài)組件
在src/App.vue
(假設(shè)這是父組件)中使用動態(tài)組件:
<template> <div> <component :is="currentComponent"></component> <button @click="changeComponent('Home')">Go to Home</button> <button @click="changeComponent('Profile')">Go to Profile</button> <button @click="changeComponent('Admin')">Go to Admin</button> </div> </template> <script> import Home from './views/Home.vue'; import Profile from './views/Profile.vue'; import Admin from './views/Admin.vue'; import { ref } from 'vue'; export default { setup() { const components = { Home, Profile, Admin }; const currentComponent = ref('Home'); const changeComponent = (componentName) => { currentComponent.value = componentName; }; return { currentComponent, changeComponent }; } }; </script>
在這個示例中,currentComponent
是一個ref
,它存儲了當(dāng)前要顯示的組件的名字。
changeComponent
函數(shù)用于根據(jù)按鈕點擊事件來改變currentComponent
的值,從而切換顯示的組件。<component :is="currentComponent"></component>
會根據(jù)currentComponent
的值動態(tài)地渲染相應(yīng)的組件。
結(jié)合路由使用動態(tài)組件(動態(tài)路由組件)
- 路由配置
在src/router/index.js
中配置路由,假設(shè)你已經(jīng)安裝并配置了vue - router
:
import { createRouter, createWebHistory } from 'vue-router'; import Home from '../views/Home.vue'; import Profile from '../views/Profile.vue'; import Admin from '../views/Admin.vue'; const router = createRouter({ history: createWebHistory(), routes: [ { path: '/', redirect: '/home' }, { path: '/home', component: Home }, { path: '/profile', component: Profile }, { path: '/admin', component: Admin } ] }); export default router;
在路由組件中使用動態(tài)組件(嵌套動態(tài)組件)
假設(shè)在Profile.vue
組件中,你還想根據(jù)用戶的不同設(shè)置(例如用戶的不同狀態(tài)或者權(quán)限)動態(tài)地顯示內(nèi)部組件。首先,在src/views
目錄下創(chuàng)建UserProfile.vue
和CompanyProfile.vue
組件。
然后在Profile.vue
中使用動態(tài)組件:
<template> <div> <h2>Profile Page</h2> <component :is="innerComponent"></component> <button @click="changeInnerComponent('UserProfile')">User Profile</button> <button @click="changeInnerComponent('CompanyProfile')">Company Profile</button> </div> </template> <script> import UserProfile from './UserProfile.vue'; import CompanyProfile from './CompanyProfile.vue'; import { ref } from 'vue'; export default { setup() { const innerComponents = { UserProfile, CompanyProfile }; const innerComponent = ref('UserProfile'); const changeInnerComponent = (componentName) => { innerComponent.value = componentName; }; return { innerComponent, changeInnerComponent }; } }; </script>
- 這樣,當(dāng)用戶訪問
/profile
路由時,會先顯示Profile.vue
組件,然后在Profile.vue
內(nèi)部,又可以根據(jù)用戶操作動態(tài)地顯示UserProfile.vue
或者CompanyProfile.vue
組件。
動態(tài)加載組件(異步組件)
- 原理
對于大型應(yīng)用或者有性能優(yōu)化需求的場景,你可能不希望一次性加載所有組件,而是在需要的時候再加載。
Vue 3支持異步加載組件,通過import()
函數(shù)來實現(xiàn)。import()
函數(shù)返回一個Promise
,當(dāng)Promise
被解決時,組件就被加載完成。
- 示例
在src/router/index.js
中修改路由配置,以Admin.vue
為例,將其改為異步加載:
import { createRouter, createWebHistory } from 'vue-router'; import Home from '../views/Home.vue'; import Profile from '../views/Profile.vue'; const router = createRouter({ history: createWebHistory(), routes: [ { path: '/', redirect: '/home' }, { path: '/home', component: Home }, { path: '/profile', component: Profile }, { path: '/admin', component: () => import('../views/Admin.vue') } ] }); export default router;
這樣,Admin.vue
組件只有在用戶訪問/admin
路由時才會被加載,減少了初始加載時間和資源占用。同時,你也可以在組件內(nèi)部結(jié)合動態(tài)組件和異步加載,實現(xiàn)更復(fù)雜的動態(tài)組件設(shè)置。
vue3 中動態(tài)路由 應(yīng)用
Vue 3 動態(tài)路由應(yīng)用場景
用戶信息展示
- 場景描述:當(dāng)有一個用戶管理系統(tǒng),需要查看每個用戶的詳細(xì)信息。不同用戶有不同的用戶 ID,通過動態(tài)路由可以根據(jù)用戶 ID 加載特定用戶的資料頁面。
- 示例:路由可以定義為
/user/:id
,其中:id
是動態(tài)參數(shù)。在用戶列表頁面,每個用戶的鏈接可以是/user/1
、/user/2
等,點擊鏈接后會跳轉(zhuǎn)到對應(yīng)的用戶詳情頁面,頁面根據(jù)傳入的id
從后端獲取并展示該用戶的信息。
分類內(nèi)容展示
- 場景描述:在一個博客系統(tǒng)或者電商系統(tǒng)中,有不同的分類,每個分類下有多個內(nèi)容項。通過動態(tài)路由可以根據(jù)分類 ID 或名稱來展示該分類下的內(nèi)容。
- 示例:比如電商系統(tǒng)中,路由
/category/:categoryName
,可以有/category/electronics
、/category/clothing
等。點擊這些鏈接后,對應(yīng)的商品列表頁面會根據(jù)傳入的分類名稱從數(shù)據(jù)庫中獲取并展示該分類下的商品。
多語言支持
- 場景描述:網(wǎng)站需要支持多種語言,根據(jù)不同的語言代碼加載相應(yīng)的語言包和頁面內(nèi)容。
- 示例:路由
/lang/:languageCode
,如/lang/en
、/lang/zh
,頁面組件根據(jù)languageCode
動態(tài)加載對應(yīng)的語言文本資源和顯示相應(yīng)的界面布局。
Vue 3 動態(tài)路由實例
項目準(zhǔn)備
- 創(chuàng)建一個 Vue 3 項目,可以使用
vue - cli
或者vite
等工具。 - 假設(shè)項目結(jié)構(gòu)有
src
目錄,src
下有views
(存放頁面組件)、router
(存放路由相關(guān)文件)。
路由配置(src/router/index.js)
import { createRouter, createWebHistory } from 'vue-router'; import UserProfile from '../views/UserProfile.vue'; import ProductList from '../views/ProductList.vue'; import NotFound from '../views/NotFound.vue'; const router = createRouter({ history: createWebHistory(), routes: [ { path: '/user/:id', component: UserProfile, props: true }, { path: '/product/:category', component: ProductList, props: true }, { path: '/:pathMatch(.*)*', component: NotFound } ] }); export default router;
用戶資料組件(src/views/UserProfile.vue
)
<template> <div> <h2>User Profile for ID: {{ id }}</h2> <!-- 這里可以根據(jù) id 從后端獲取用戶數(shù)據(jù)并展示,比如姓名、年齡等信息 --> </div> </template> <script> export default { props: ['id'], setup(props) { return { id: props.id }; } }; </script>
產(chǎn)品列表組件(src/views/ProductList.vue
)
<template> <div> <h2>Products in Category: {{ category }}</h2> <!-- 根據(jù) category 從后端獲取商品列表并展示 --> </div> </template> <script> export default { props: ['category'], setup(props) { return { category: props.category }; } }; </script>
404 組件(src/views/NotFound.vue
)
<template> <div> <h2>404 - Page Not Found</h2> </div> </template>
在App.vue
中使用路由鏈接(src/App.vue
)
<template> <div id="app"> <router-link :to="{ name: 'userProfile', params: { id: 1 }}">User 1 Profile</router-link> <router-link :to="{ name: 'userProfile', params: { id: 2 }}">User 2 Profile</router-link> <br> <router-link :to="{ name: 'productList', params: { category: 'electronics' }}">Electronics Products</router-link> <router-link :to="{ name: 'productList', params: { category: 'clothing' }}">Clothing Products</router-link> <router-view></router-view> </div> </template>
在這個實例中:
- 路由配置了兩個動態(tài)路由
/user/:id
和/product/:category
,分別用于用戶資料展示和產(chǎn)品列表展示。 - 對應(yīng)的
UserProfile
和ProductList
組件通過props
接收動態(tài)參數(shù),并可以在組件內(nèi)部進(jìn)行進(jìn)一步操作。 App.vue
中使用router - link
創(chuàng)建了指向不同動態(tài)路由的鏈接,方便用戶導(dǎo)航。同時,還有一個404
頁面用于處理未匹配的路由。
removeRoute 以及 hasRoute
removeRoute
應(yīng)用場景及實例
應(yīng)用場景
- 權(quán)限變更:當(dāng)用戶的權(quán)限發(fā)生變化,某些路由不再可用時,需要從路由表中移除這些路由。例如,用戶從管理員權(quán)限降級為普通用戶權(quán)限,之前管理員權(quán)限下的特定路由(如系統(tǒng)設(shè)置、用戶管理等路由)需要被移除。
- 模塊卸載:在一個復(fù)雜的單頁應(yīng)用中,如果有一些可插拔的模塊,當(dāng)這些模塊被卸載時,相關(guān)的路由也應(yīng)該被移除。比如一個電商應(yīng)用中的促銷活動模塊,活動結(jié)束后,相關(guān)的促銷活動路由(如
/promotion/:id
)應(yīng)該被移除。
實例
- 假設(shè)我們有一個簡單的應(yīng)用,包含一個管理員路由
/admin/dashboard
,用戶最初以管理員身份登錄,后來權(quán)限變更為普通用戶。 - 在
src/router/index.js
中,路由配置如下:
import { createRouter, createWebHistory } from 'vue-router'; import Home from '../views/Home.vue'; import AdminDashboard from '../views/AdminDashboard.vue'; const router = createRouter({ history: createWebHistory(), routes: [ { path: '/', redirect: '/home' }, { path: '/home', component: Home }, { path: '/admin/dashboard', component: AdminDashboard } ] }); export default router;
- 在
src/store/index.js
(假設(shè)使用Vuex來管理狀態(tài))中,當(dāng)用戶權(quán)限變更時,觸發(fā)removeAdminRoute
動作:
import { createStore } from 'vuex'; export default createStore({ state: { userRole: 'admin' }, mutations: { CHANGE_USER_ROLE(state, role) { state.userRole = role; } }, actions: { removeAdminRoute({ state, commit }, newRole) { const router = require('../router/index.js').default; if (state.userRole === 'admin' && newRole!== 'admin') { router.removeRoute('adminDashboard'); commit('CHANGE_USER_ROLE', newRole); } } } });
- 在
src/App.vue
(或其他合適的地方),模擬權(quán)限變更:
<template> <div> <button @click="changeUserRole('user')">Change to User Role</button> <router - view></router - view> </div> </template> <script> import { useStore } from 'vuex'; export default { setup() { const store = useStore(); const changeUserRole = (role) => { store.dispatch('removeAdminRoute', role); }; return { changeUserRole }; } }; </script>
hasRoute
應(yīng)用場景及實例
應(yīng)用場景:
- 路由檢查與導(dǎo)航引導(dǎo):在進(jìn)行頁面導(dǎo)航之前,可以使用
hasRoute
來檢查目標(biāo)路由是否存在。這在復(fù)雜的路由嵌套或者動態(tài)添加/刪除路由的場景中非常有用。例如,在一個多模塊應(yīng)用中,一個模塊可能會動態(tài)添加一些路由,另一個模塊在導(dǎo)航時需要確認(rèn)這些路由是否已經(jīng)添加,以避免出現(xiàn)404
錯誤。 - 權(quán)限檢查與路由隱藏:除了在導(dǎo)航過程中檢查路由是否存在,還可以結(jié)合用戶權(quán)限來檢查是否有特定的路由。如果用戶沒有訪問某個路由的權(quán)限,并且該路由也不存在于當(dāng)前路由表中(可能已經(jīng)被移除),可以在界面上隱藏相關(guān)的導(dǎo)航鏈接,提供更好的用戶體驗。
實例:
- 假設(shè)我們有一個應(yīng)用,有兩個模塊:
ModuleA
和ModuleB
。ModuleA
會動態(tài)添加一個路由/moduleA/special
,ModuleB
在導(dǎo)航到/moduleA/special
之前需要檢查該路由是否存在。 - 在
src/router/index.js
中,初始路由配置:
import { createRouter, createWebHistory } from 'vue-router'; import Home from '../views/Home.vue'; import ModuleA from '../views/ModuleA.vue'; const router = createRouter({ history: createWebHistory(), routes: [ { path: '/', redirect: '/home' }, { path: '/home', component: Home }, { path: '/moduleA', component: ModuleA } ] }); export default router;
- 在
ModuleA.vue
中,動態(tài)添加路由:
<template> <div> <h2>Module A</h2> <button @click="addSpecialRoute">Add Special Route</button> </div> </template> <script> import { createRouter, createWebHistory } from 'vue-router'; import SpecialPage from '../views/SpecialPage.vue'; export default { setup() { const addSpecialRoute = () => { const router = createRouter({ history: createWebHistory(), routes: [ { path: '/moduleA/special', component: SpecialPage, name:'moduleASpecial' } ] }); router.addRoute('/moduleA', { path: '/moduleA/special', component: SpecialPage, name:'moduleASpecial' }); }; return { addSpecialRoute }; } }; </script>
- 在
ModuleB.vue
(假設(shè)是一個導(dǎo)航組件)中,檢查路由是否存在并進(jìn)行導(dǎo)航:
<template> <div> <h2>Module B</h2> <button @click="navigateToSpecialRoute"> Navigate to Special Route in Module A </button> </div> </template> <script> import { useRouter } from 'vue-router'; export default { setup() { const router = useRouter(); const navigateToSpecialRoute = () => { if (router.hasRoute('moduleASpecial')) { router.push('/moduleA/special'); } else { console.log('Route does not exist.'); } }; return { navigateToSpecialRoute }; } } }; </script>
思考(當(dāng)頁面被刷新時store 數(shù)據(jù)會被重置,怎么保持登錄狀態(tài),并建立當(dāng)前緩存)
使用瀏覽器本地存儲(Local Storage或Session Storage)保存登錄狀態(tài)相關(guān)數(shù)據(jù)
原理:
- 瀏覽器的本地存儲可以在頁面刷新或關(guān)閉后仍然保留數(shù)據(jù)。當(dāng)用戶登錄成功后,將用戶的登錄狀態(tài)(如登錄令牌、用戶信息等)存儲到本地存儲中。
- 在頁面加載時,從本地存儲中讀取這些數(shù)據(jù)來恢復(fù)登錄狀態(tài)。
示例(使用Vuex和Local Storage)
- 存儲登錄狀態(tài)到本地存儲(在登錄成功的邏輯中)
import { setItem } from '../utils/localStorageUtil'; // 假設(shè)這個函數(shù)用于設(shè)置本地存儲的值 export const login = ({ commit }, user) => { // 模擬登錄成功后的邏輯,比如獲取用戶令牌 const token = 'generated_token'; // 將令牌和用戶信息存儲到本地存儲 setItem('userToken', token); setItem('userInfo', user); commit('SET_USER', user); commit('SET_LOGGED_IN', true); };
- 在
src/store/actions.js
(假設(shè)將登錄相關(guān)動作放在單獨的文件中)中,修改登錄動作:
從本地存儲中恢復(fù)登錄狀態(tài)(在應(yīng)用初始化時)
import { getItem } from '../utils/localStorageUtil'; import { createApp } from 'vue'; import store from './store'; import App from './App.vue'; import router from './router'; const app = createApp(App); const userToken = getItem('userToken'); const userInfo = getItem('userInfo'); if (userToken && userInfo) { store.commit('SET_USER', userInfo); store.commit('SET_LOGGED_IN', true); } app.use(store).use(router).mount('#app');
- 在
src/main.js
中,在創(chuàng)建Vue應(yīng)用之前,檢查本地存儲中的登錄狀態(tài)并恢復(fù):
利用Vuex - Persistedstate插件持久化存儲狀態(tài)
原理:
vuex - persistedstate
插件可以自動將Vuex的狀態(tài)保存到本地存儲或者其他存儲介質(zhì)中,并在應(yīng)用重新加載時恢復(fù)狀態(tài)。- 它通過訂閱Vuex的變化,將狀態(tài)數(shù)據(jù)序列化后存儲,在初始化時再反序列化并恢復(fù)狀態(tài)。
示例:
安裝插件:
npm install vuex - persistedstate
首先,安裝vuex - persistedstate
:
配置插件(在src/store/index.js
中)
import { createStore } from 'vuex'; import createPersistedState from 'vuex - persistedstate'; const store = createStore({ state: { user: null, loggedIn: false }, mutations: { SET_USER(state, user) { state.user = user; }, SET_LOGGED_IN(state, loggedIn) { state.loggedIn = loggedIn; } }, plugins: [ createPersistedState({ storage: window.localStorage, paths: ['user', 'loggedIn'] }) ] }); export default store;
- 在這個配置中,
createPersistedState
插件會將user
和loggedIn
這兩個狀態(tài)屬性保存到本地存儲中,并且在頁面刷新后從本地存儲中恢復(fù)這些狀態(tài)。
建立緩存機(jī)制(以路由組件緩存為例)
原理:
- 對于一些不需要每次都重新加載的頁面組件(比如用戶資料頁面,在用戶登錄狀態(tài)不變的情況下內(nèi)容不會改變),可以使用Vue的
keep - alive
組件來緩存。 keep - alive
會將包裹的組件實例緩存起來,下次再訪問該組件時,會直接使用緩存的實例,而不是重新創(chuàng)建。
示例(在路由視圖中緩存組件):
- 在
src/App.vue
中,使用keep - alive
包裹router - view
:
<template> <div id="app"> <keep - alive> <router - view></router - view> </keep - alive> </div> </template>
- 這樣,在路由切換時,如果是已經(jīng)訪問過的組件,會優(yōu)先從緩存中獲取,減少了組件重新加載的次數(shù),對于保持頁面狀態(tài)(如表單填寫狀態(tài)、滾動位置等)也很有幫助。
- 不過要注意,對于一些數(shù)據(jù)可能會變化的組件,需要正確地處理緩存更新的情況,比如通過
activated
和deactivated
生命周期鉤子來更新數(shù)據(jù)。
keep-alive
keep - alive
實例應(yīng)用場景
多標(biāo)簽頁系統(tǒng)(Tab System)
- 場景描述:在一個類似瀏覽器標(biāo)簽頁的應(yīng)用界面中,用戶可以在多個頁面(標(biāo)簽)之間切換。這些頁面可能包含表單、圖表、列表等各種內(nèi)容。例如,一個數(shù)據(jù)管理系統(tǒng),用戶可以在“用戶列表”“數(shù)據(jù)報表”“系統(tǒng)設(shè)置”等多個標(biāo)簽頁之間切換。
keep - alive
優(yōu)勢:使用keep - alive
可以緩存這些標(biāo)簽頁對應(yīng)的組件。當(dāng)用戶切換回之前訪問過的標(biāo)簽頁時,組件不需要重新渲染,能夠快速恢復(fù)之前的狀態(tài),提供流暢的用戶體驗。例如,“用戶列表”標(biāo)簽頁中的搜索條件、滾動位置和選中的行等信息都能得以保留。
向?qū)奖韱危╓izard - style Forms)
- 場景描述:在一個包含多個步驟的表單應(yīng)用中,如電商平臺的購物流程(包括購物車、收貨地址、支付方式等步驟)或用戶注冊流程(包含基本信息、驗證信息、興趣愛好等步驟)。
keep - alive
優(yōu)勢:將每個步驟對應(yīng)的組件用keep - alive
包裹,可以在用戶來回切換步驟時,保持每個步驟表單中已填寫的數(shù)據(jù)和狀態(tài)。這樣可以避免用戶因為頁面重新加載而丟失數(shù)據(jù),減少用戶的操作成本和煩躁情緒。
復(fù)雜的圖表展示(Complex Chart Display)
- 場景描述:在數(shù)據(jù)可視化應(yīng)用中,有多種復(fù)雜的圖表,如柱狀圖、折線圖、餅圖等,這些圖表可能需要從后端獲取數(shù)據(jù)并進(jìn)行渲染,而且用戶可能會頻繁切換查看不同類型的圖表。
keep - alive
優(yōu)勢:通過keep - alive
緩存圖表組件,當(dāng)用戶切換回之前查看過的圖表時,不需要重新獲取數(shù)據(jù)和重新渲染圖表,能夠快速顯示之前的圖表狀態(tài),提高應(yīng)用的響應(yīng)速度,特別是在數(shù)據(jù)量較大或者獲取數(shù)據(jù)的接口響應(yīng)較慢的情況下,這種優(yōu)勢更加明顯。
keep - alive
注意點總結(jié):
keep-alive(exclude / include)
生命周期鉤子的變化
activated
和deactivated
鉤子:被keep - alive
包裹的組件會新增activated
和deactivated
生命周期鉤子。activated
鉤子在組件從緩存中激活時調(diào)用,deactivated
鉤子在組件被緩存(切換到其他組件)時調(diào)用。在這些鉤子中,可以進(jìn)行一些特定的操作,比如在activated
鉤子中重新獲取數(shù)據(jù)(如果數(shù)據(jù)可能已經(jīng)更新),或者在deactivated
鉤子中暫停一些定時器或動畫。- 與其他生命周期鉤子的關(guān)系:需要注意的是,當(dāng)組件被緩存時,
mounted
等生命周期鉤子不會再次觸發(fā),除非組件被重新創(chuàng)建(例如緩存被清除或者組件對應(yīng)的v - node
被重新創(chuàng)建)。這意味著如果組件的初始化操作放在mounted
鉤子中,并且組件被緩存,這些操作可能不會在每次顯示組件時執(zhí)行,需要根據(jù)情況調(diào)整到activated
鉤子或者其他合適的地方。
組件狀態(tài)更新與緩存更新
- 數(shù)據(jù)更新問題:如果緩存的組件中的數(shù)據(jù)可能會被其他組件或全局狀態(tài)的變化所影響,需要考慮如何正確地更新緩存組件中的數(shù)據(jù)。一種方法是在
activated
鉤子中檢查數(shù)據(jù)是否需要更新,并根據(jù)需要重新獲取數(shù)據(jù)或者更新數(shù)據(jù)。另一種方法是使用響應(yīng)式數(shù)據(jù)(如Vuex中的狀態(tài)或者ref
/reactive
對象),并在數(shù)據(jù)變化時通過合適的方式通知緩存組件進(jìn)行更新。 - 動態(tài)組件與
keep - alive
:當(dāng)keep - alive
包裹動態(tài)組件時,需要特別注意組件的切換和緩存更新。如果動態(tài)組件的類型或者屬性發(fā)生變化,可能需要考慮如何處理緩存中的舊組件實例。例如,可以在動態(tài)組件切換時,清除舊組件的緩存或者根據(jù)新的組件屬性更新緩存中的組件。
緩存的清除與管理
- 手動清除緩存:在某些情況下,可能需要手動清除
keep - alive
的緩存。例如,當(dāng)用戶執(zhí)行了某個操作(如退出登錄或者更新了某些關(guān)鍵數(shù)據(jù))后,希望重新加載所有組件,而不是使用緩存??梢酝ㄟ^keep - alive
組件提供的exclude
或include
屬性來控制哪些組件被緩存,或者通過編程方式(如在Vuex
的mutation
或action
中)清除緩存。 - 緩存大小和性能考慮:如果緩存的組件過多或者組件本身占用內(nèi)存較大,可能會影響應(yīng)用的性能。需要根據(jù)應(yīng)用的實際情況,合理地選擇要緩存的組件,并考慮緩存的生命周期和清除策略,以避免內(nèi)存泄漏或者性能下降的問題。
keep - alive
基礎(chǔ)回顧
keep - alive
是Vue.js中的一個組件,用于緩存內(nèi)部的組件。- 當(dāng)組件在
keep - alive
內(nèi)部被切換時,它們不會被銷毀,而是被緩存起來,下次再顯示時可以快速恢復(fù),減少重新渲染的時間。
include
屬性應(yīng)用實例
場景描述:
- 假設(shè)我們有一個應(yīng)用,有三個路由組件:
Home.vue
、Profile.vue
和Settings.vue
。 - 我們希望只緩存
Home.vue
和Profile.vue
組件,因為Settings.vue
組件的內(nèi)容可能會經(jīng)常變化,每次進(jìn)入都希望重新加載。
代碼實現(xiàn):
- 在
App.vue
文件中:
<template> <div id="app"> <keep - alive :include="['Home', 'Profile']"> <router - view></router - view> </keep - alive> </div> </template> <script> import { defineComponent } from 'vue'; export default defineComponent({ name: 'App' }); </script>
- 這里的
include
屬性是一個數(shù)組,數(shù)組中的元素是要被緩存的組件的名稱。 - 在這個例子中,只有名稱為
Home
和Profile
的組件會被keep - alive
緩存。需要注意的是,組件名稱是在組件定義時通過name
屬性指定的。 - 例如,在
Home.vue
組件中應(yīng)該有如下定義:
<template> <div> Home Component </div> </template> <script> export default { name: 'Home' }; </script>
exclude
屬性應(yīng)用實例:
場景描述:
- 假設(shè)我們有同樣的三個路由組件,但是我們希望緩存除了
Settings.vue
之外的所有組件。 - 這種情況可以使用
exclude
屬性。
代碼實現(xiàn):
- 在
App.vue
文件中:
<template> <div id="app"> <keep - alive :exclude="['Settings']"> <router - view></router - view> </keep - alive> </div> </template> <script> import { defineComponent } from 'vue'; export default defineComponent({ name: 'App' }); </script>
- 這里的
exclude
屬性也是一個數(shù)組,數(shù)組中的元素是不被緩存的組件的名稱。 - 在這個例子中,名稱為
Settings
的組件不會被keep - alive
緩存,而Home.vue
和Profile.vue
組件會被緩存。
結(jié)合動態(tài)組件的應(yīng)用實例(進(jìn)階)
場景描述:
- 假設(shè)我們有一個頁面,里面有一個動態(tài)組件,根據(jù)用戶的選擇可以切換不同的子組件,如
ComponentA.vue
、ComponentB.vue
和ComponentC.vue
。 - 我們希望根據(jù)用戶的權(quán)限來決定哪些組件可以被緩存。
- 例如,普通用戶只能看到
ComponentA.vue
和ComponentB.vue
,并且只有ComponentA.vue
可以被緩存;管理員可以看到所有組件,并且ComponentB.vue
和ComponentC.vue
可以被緩存。
代碼實現(xiàn):
- 在父組件(假設(shè)為
Parent.vue
)中:
<template> <div> <keep - alive :include="cachedComponents"> <component :is="currentComponent"></component> </keep - alive> <button @click="changeComponent('ComponentA')">Show ComponentA</button> <button @click="changeComponent('ComponentB')">Show ComponentB</button> <button @click="changeComponent('ComponentC')">Show ComponentC</button> </div> </template> <script> import { defineComponent, ref } from 'vue'; import ComponentA from './ComponentA.vue'; import ComponentB from './ComponentB.vue'; import ComponentC from './ComponentC.vue'; export default defineComponent({ setup() { const components = { ComponentA, ComponentB, ComponentC }; const currentComponent = ref('ComponentA'); const userRole = 'user'; // 假設(shè)用戶角色,實際應(yīng)用中應(yīng)該從用戶信息獲取 const cachedComponents = userRole === 'user'? ['ComponentA'] : ['ComponentB', 'ComponentC']; const changeComponent = (componentName) => { currentComponent.value = componentName; }; return { currentComponent, cachedComponents, changeComponent }; } }); </script>
- 在這個例子中,
cachedComponents
是一個響應(yīng)式數(shù)組,根據(jù)用戶角色來決定哪些組件應(yīng)該被包含在keep - alive
的緩存中。 - 動態(tài)組件
component
會根據(jù)currentComponent
的值來切換顯示不同的子組件,并且只有在cachedComponents
數(shù)組中的組件才會被keep - alive
緩存。
總結(jié)
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue?async?await?promise等待異步接口執(zhí)行完畢再進(jìn)行下步操作教程
在Vue中可以使用異步函數(shù)和await關(guān)鍵字來控制上一步執(zhí)行完再執(zhí)行下一步,這篇文章主要給大家介紹了關(guān)于vue?async?await?promise等待異步接口執(zhí)行完畢再進(jìn)行下步操作的相關(guān)資料,需要的朋友可以參考下2023-12-12