网站为什么功能需求,运城网站推广,管理人员培训课程,app运营费用目录 前言1. 基本知识2. Demo2.1 基本2.2 拓展2.3 终极 3. 实战 前言 #x1f91f; 找工作#xff0c;来万码优才#xff1a;#x1f449; #小程序://万码优才/r6rqmzDaXpYkJZF 基本知识推荐阅读#xff1a;KeepAlive知识点
从实战中学习#xff0c;源自实战中vue路由的… 目录 前言1. 基本知识2. Demo2.1 基本2.2 拓展2.3 终极 3. 实战 前言 找工作来万码优才 #小程序://万码优才/r6rqmzDaXpYkJZF 基本知识推荐阅读KeepAlive知识点
从实战中学习源自实战中vue路由的缓存设置
router-view v-ifrouterAlivetemplate #default{ Component, route }keep-alive :includegetCachescomponent :isComponent :keyroute.fullPath //keep-alive/template
/router-view截图如下 1. 基本知识
KeepAlive 内置组件用于缓存动态组件或路由组件以提高性能 可以保留组件的状态避免重复渲染和生命周期钩子的重新调用
KeepAlive 作用
缓存组件提高性能避免组件反复销毁和创建保留组件的状态例如表单填写内容、滚动位置等控制缓存可以指定哪些组件需要被缓存哪些不需要
KeepAlive 适用场景
需要缓存的 多页面表单列表详情页切换 时保留列表的滚动位置复杂组件切换时避免重新渲染带来的性能开销
功能说明KeepAlive用于缓存组件提高性能include指定要缓存的组件支持字符串或数组exclude指定不缓存的组件max限制最大缓存组件数量activated()组件被激活时触发deactivated()组件被缓存时触发
include 和 exclude 可以通过 include 和 exclude 来决定哪些组件需要被缓存哪些不需要
keep-alive includeComponentAcomponent :iscurrentComponent/component
/keep-alive只有 ComponentA 会被缓存而 ComponentB 不会
或者
keep-alive :include[ComponentA, ComponentC]component :iscurrentComponent/component
/keep-alive只有 ComponentA 和 ComponentC 会被缓存 如果需要排除某个组件
keep-alive excludeComponentBcomponent :iscurrentComponent/component
/keep-aliveComponentB 不会被缓存而其他组件都会被缓存
max —— 设置缓存组件的最大数量 如果缓存的组件较多可以设置 max 限制最多缓存多少个组件 只缓存最近的两个组件超出的组件会被销毁
keep-alive :max2component :iscurrentComponent/component
/keep-aliveKeepAlive 生命周期钩子 Vue 提供了两个专门用于 KeepAlive 组件的生命周期钩子 activated()组件被激活切换到缓存中的组件时调用 deactivated()组件被缓存切换到另一个组件时调用
script
export default {created() {console.log(组件创建);},activated() {console.log(组件被激活);},deactivated() {console.log(组件被缓存);},destroyed() {console.log(组件被销毁);},
};
/script运行效果
组件首次渲染时created() 会触发当组件切换回来时activated() 会触发而不会重新执行 created()切换到别的组件时deactivated() 触发而不会执行 destroyed()只有当缓存被清除时才会执行 destroyed()
2. Demo
2.1 基本
动态组件缓存
templatedivbutton clickcurrentComponent ComponentA切换到A/buttonbutton clickcurrentComponent ComponentB切换到B/buttonkeep-alivecomponent :iscurrentComponent/component/keep-alive/div
/templatescript
import ComponentA from ./ComponentA.vue;
import ComponentB from ./ComponentB.vue;export default {data() {return {currentComponent: ComponentA,};},components: {ComponentA,ComponentB,},
};
/script组件 A (ComponentA.vue)
templatedivh3组件 A/h3input v-modeltext placeholder输入内容会被缓存 //div
/templatescript
export default {data() {return {text: ,};},created() {console.log(ComponentA 创建);},destroyed() {console.log(ComponentA 被销毁);},
};
/script组件 B (ComponentB.vue)
templatedivh3组件 B/h3/div
/templatescript
export default {created() {console.log(ComponentB 创建);},destroyed() {console.log(ComponentB 被销毁);},
};
/script一个最明显的变化就是 在 ComponentA 中输入一些文字然后切换到 ComponentB再切回来发现输入内容还在ComponentA 没有被销毁
2.2 拓展
KeepAlive 也可以与 Vue Router 结合缓存路由组件 这样在 PageA 和 PageB 之间切换时PageA 不会被销毁而是会被缓存
templatedivrouter-link to/pageA页面 A/router-linkrouter-link to/pageB页面 B/router-linkkeep-aliverouter-view/router-view/keep-alive/div
/template路由配置
import { createRouter, createWebHistory } from vue-router;
import PageA from ./PageA.vue;
import PageB from ./PageB.vue;const routes [{ path: /pageA, component: PageA },{ path: /pageB, component: PageB },
];const router createRouter({history: createWebHistory(),routes,
});export default router;2.3 终极
这也是实战中常用的一种方式从实战中抽离出基本的Demo以 Vue 3 Vue Router 4 Pinia
装依赖npm install vue-router4 pinia
main.ts应用入口
import { createApp } from vue
import { createPinia } from pinia
import { createRouter, createWebHistory } from vue-router
import App from ./App.vue
import Home from ./views/Home.vue
import About from ./views/About.vue
import Profile from ./views/Profile.vueconst pinia createPinia()// 定义路由
const routes [{ path: /, component: Home, name: Home },{ path: /about, component: About, name: About },{ path: /profile, component: Profile, name: Profile }
]const router createRouter({history: createWebHistory(),routes
})const app createApp(App)
app.use(pinia)
app.use(router)
app.mount(#app)store/tagsView.tsPinia 状态管理 - 维护缓存组件列表
import { defineStore } from piniaexport const useTagsViewStore defineStore(tagsView, {state: () ({cachedViews: new Setstring()}),getters: {getCachedViews(): string[] {return Array.from(this.cachedViews)}},actions: {addCachedView(name: string) {this.cachedViews.add(name)},removeCachedView(name: string) {this.cachedViews.delete(name)},clearCachedViews() {this.cachedViews.clear()}}
})App.vueKeepAlive 组件封装
script setup langts
import { computed, ref, provide, nextTick } from vue
import { useTagsViewStore } from ./store/tagsView
import { RouterView } from vue-routerconst tagsViewStore useTagsViewStore()
const getCaches computed(() tagsViewStore.getCachedViews)// 无感刷新功能
const routerAlive ref(true)
const reload () {routerAlive.value falsenextTick(() (routerAlive.value true))
}
provide(reload, reload)
/scripttemplatedivrouter-view v-ifrouterAlivetemplate #default{ Component, route }keep-alive :includegetCachescomponent :isComponent :keyroute.fullPath //keep-alive/template/router-view/div
/templateviews/Home.vue
script setup langts
import { inject } from vueconst reload inject(reload) as () void
/scripttemplatedivh1Home Page/h1button clickreload刷新当前组件/button/div
/templateviews/About.vue
templatedivh1About Page/h1/div
/templateviews/Profile.vue
templatedivh1Profile Page/h1/div
/template动态路由的常用操作
动态添加路由 在 router.ts 中可以动态添加路由
import router from ./routerconst newRoute {path: /new-page,component: () import(/views/NewPage.vue),name: NewPage
}router.addRoute(newRoute)动态移除路由router.removeRoute(NewPage) 监听路由变化
import { useRoute, useRouter } from vue-router
import { watch } from vueconst route useRoute()
const router useRouter()watch(() route.fullPath, (newPath) {console.log(路由发生变化:, newPath)
})3. 实战
以ruoyi-vue-pro实战的Demo进行讲解源码芋道源码/ruoyi-vue-pro
具体KeepAlive其文件在App.vue中
router-view v-ifrouterAlivetemplate #default{ Component, route }keep-alive :includegetCachescomponent :isComponent :keyroute.fullPath //keep-alive/template
/router-view通过组件的设置是否路由进行缓存后续获取到这个路由信息时对应判定是否该路由有缓存信息
const getCaches computed((): string[] {const caches tagsViewStore.getCachedViewsconsole.log(当前缓存的组件:, caches) // 打印缓存的组件名称return caches
})const tagsView computed(() appStore.getTagsView)//region 无感刷新
const routerAlive ref(true)
// 无感刷新防止出现页面闪烁白屏
const reload () {routerAlive.value falsenextTick(() (routerAlive.value true))
}
// 为组件后代提供刷新方法
provide(reload, reload)对应的tagsView信息如下
后续在tsx中进行引用
后续新增路由的时候其路由地址 要和 defineOptions({ name: xxx }) 对应一致
