怎么管理网站,昆山网站优化公司,程序员怎么做网站赚钱,wordpress伪静态自定义在 Vue 3 中#xff0c;keep-alive 是一个内置组件#xff0c;用于提高性能和减少不必要的组件销毁与重建。它与组件的生命周期紧密相关#xff0c;特别是在动态组件和路由切换场景下#xff0c;能够缓存组件的状态并避免重新渲染。
而 onActivated 和 onDeactivated 是 …在 Vue 3 中keep-alive 是一个内置组件用于提高性能和减少不必要的组件销毁与重建。它与组件的生命周期紧密相关特别是在动态组件和路由切换场景下能够缓存组件的状态并避免重新渲染。
而 onActivated 和 onDeactivated 是 Vue3 Composition API 提供的钩子函数专门用于处理被 keep-alive 缓存组件的激活和销毁逻辑。
1. keep-alive
1.1 什么是 keep-alive
在 Vue 中keep-alive 是一个内置的高阶组件用于缓存不再活跃的组件实例使其在不再渲染时依然保留状态。通过在需要频繁切换视图组件或动态组件时使用 keep-alive这样可以避免频繁销毁和重新创建组件从而提高性能。
eg很多情况下当在多个选项卡或页面之间切换时可能会希望保留每个选项卡的状态而不是每次切换时都销毁再重新加载它们。此时keep-alive 就可以解决这个问题。
1.2 基本使用
keep-alive 可以包裹动态组件或页面当使用时它会缓存已渲染的组件并将其状态保持在内存中。当组件再次被激活时keep-alive 会复用该组件的实例而不是重新创建一个新的组件。 子组件 A B 类似
templatedivh2这是组件A/h2p这是组件A的内容/p/div
/templatescript
export default {name: ComponentA,mounted() {console.log(ComponentA 被挂载);},unmounted() {console.log(ComponentA 被卸载);},
};
/scriptApp. vue
templatedivbutton clickswitchComponent切换组件/buttonkeep-alivecomponent :iscurrentComponent/component/keep-alive/div
/templatescript
import { defineComponent, ref } from vue;
import ComponentA from ./components/ComponentA.vue;
import ComponentB from ./components/ComponentB.vue;export default defineComponent({name: App,setup() {// 当前渲染的组件直接引用组件const currentComponent ref(ComponentA);// 切换组件的逻辑const switchComponent () {currentComponent.value JSON.stringify(currentComponent.value) JSON.stringify(ComponentA) ? ComponentB : ComponentA;};return {currentComponent,switchComponent,};},
});
/script展示如下 点击切换 切换后A 组件被缓存而不是被销毁再次切换回来 B 组件被缓存A 组件重新渲染。
如果不使用 keep-alive 表现为
templatedivbutton clickswitchComponent切换组件/buttoncomponent :iscurrentComponent/component/div
/template 组件先被销毁然后创建。
小 Tip 1
下面写法展示组件失败为什么呢
根本原因是在 setup() 中使用的是字符串 ComponentA 和 ComponentB而在 keep-alive 和 component 组件的 :is 属性中Vue 期望的是组件本身而不是它的字符串名称。
因此需要将 currentComponent 的值设置为 组件的引用。
export default defineComponent({name: App,setup() {// 当前渲染的组件const currentComponent ref(ComponentA);// 切换组件的逻辑const switchComponent () {currentComponent.value currentComponent.value ComponentA ? ComponentB : ComponentA;};return {currentComponent,switchComponent,};},
});
小 Tip 2
上面图片右侧控制台出现黄色警告⚠️说明在 ref 中存储了一个 Vue 组件实例的响应式对象而 Vue 会自动将其变成响应式这可能会带来性能问题为了避免这个情况Vue 建议使用 markRaw 或 shallowRef 避免组件变成响应式对象。
解决方法
1、使用 markRaw
markRaw 会阻止 Vue 对传入对象进行响应式处理它是 Vue 提供的一个优化方法适用于那些不需要响应式处理的对象比如组件。
// 使用 markRaw 来避免组件变成响应式
const currentComponent ref(markRaw(ComponentA));
2、使用 shallowRef推荐
shallowRef 是 Vue 3 提供的一个 API类似于 ref但它只会让引用的对象本身变得响应式而不会递归地将对象中的嵌套属性变成响应式。对于 Vue 组件使用 shallowRef 会更加合适因为我们只关心组件本身的引用而不需要其内部的响应式。
// 使用 shallowRef 来避免组件变成深度响应式
const currentComponent shallowRef(ComponentA); 1.3 include 和 exclude 属性
keep-alive 还提供了 include 和 exclude 属性用于控制哪些组件应该被缓存哪些组件不应该被缓存。
- include一个字符串、正则表达式或数组指定哪些组件应该被缓存。
- exclude一个字符串、正则表达式或数组指定哪些组件不应该被缓存。 templatedivbutton clickswitchComponent切换组件/buttonkeep-alive :include[ComponentA] :exclude[ComponentB]component :iscurrentComponent/component/keep-alive/div
/template
script
import { defineComponent, shallowRef } from vue;
import ComponentA from ./components/ComponentA.vue;
import ComponentB from ./components/ComponentB.vue;export default defineComponent({name: App,setup() {const currentComponent shallowRef(ComponentA);const switchComponent () {currentComponent.value JSON.stringify(currentComponent.value) JSON.stringify(ComponentA) ? ComponentB : ComponentA;};return {currentComponent,switchComponent,};},
});
/script
只有 ComponentA 会被缓存ComponentB 不会。根据实际需要灵活控制哪些组件需要被缓存。 2. 钩子函数
2.1 onActivated
onActivated 钩子会在组件被缓存并重新激活时触发。通常情况下组件被 keep-alive 缓存后如果用户切换到该组件Vue 会复用这个组件的实例并调用 onActivated 钩子。
使用场景需要在组件激活时重新加载数据、执行某些操作eg开启动画、更新状态等。
2.2 onDeactivated
与 onActivated 类似onDeactivated 会在组件被缓存并从 keep-alive 中移除时触发。此时组件的状态会被保留但它的 DOM 和实例会被销毁当再次激活时onActivated 会重新触发。
使用场景需要在组件去激活时清理资源例如停止计时器、清理事件监听器等。或进行一些状态重置操作。
2.3
注意这两个钩子函数只有在组件被 keep-alive 包裹且组件经历过激活和停用的过程也就是组件需要在显示和隐藏之间切换而不是一直保持显示状态。
子组件
templatedivh3子组件/h3/div
/templatescript setup
import { onActivated, onDeactivated } from vue;// 在组件激活时重新加载数据
onActivated(() {console.log(组件被激活重新加载数据);
});// 在组件停用时清理数据
onDeactivated(() {console.log(组件被停用清理数据或停止操作);
});
/scriptApp.vue
templatedivkeep-aliveInfo v-ifisActive //keep-alivebutton clicktoggleActive切换显示/button/div
/templatescript setup
import { ref } from vue;
import Info from ./components/Info.vue;const isActive ref(true);const toggleActive () {isActive.value !isActive.value;
};
/script展示为 小 Tip 3
上面使用 v-if 控制组件的显示和隐藏如果使用 v-show 呢
templatedivbutton clicktoggleActive切换组件显示/buttonkeep-aliveUserInfo v-showisActive //keep-alive/div
/template结果是不会触发。
如果使用 v-show 控制组件显示和隐藏不会触发两个钩子的执行因为其是通过修改 display 属性来显示或隐藏 DOM 元素而不会销毁和重新渲染组件。 2.4 存在问题
1、缓存时的副作用
当组件被缓存时它的状态会保留在内存中不会被销毁。如果需要清理某些副作用例如清理计时器、停止网络请求等应该在 onDeactivated 中进行处理。
onDeactivated(() {// 停止任何异步任务或计时器clearInterval(someTimer)console.log(停止异步任务)
})2、性能问题
如果 onActivated 钩子执行了某些耗时操作如数据请求、定时任务等可能会影响用户体验。为了避免影响性能可以在 onActivated 中进行懒加载操作只在需要时执行某些任务。
onActivated(() {if (!info.value) {fetchData() // 如果没有数据才加载}
})3. keep-alive 与路由结合
3.1 在 Vue 路由中使用 keep-alive
Vue 路由通常与 keep-alive 一起使用特别是在单页面应用SPA中。当切换路由时希望某些页面保持活跃并缓存其状态。keep-alive 可以用来缓存路由视图组件避免在路由切换时销毁和重新渲染。
templatekeep-aliverouter-view/router-view/keep-alive
/templatescript
export default {// 使用 keep-alive 包裹 router-view使得路由切换时组件能够缓存
};
/scriptrouter-view 是 Vue 路由用于渲染当前匹配的路由组件keep-alive 缓存路由组件当路由切换时之前的组件不会被销毁而是保持活跃并缓存状态。
3.2 动态路由
keep-alive 的 include 和 exclude 属性可以用来动态控制哪些路由视图组件应该被缓存哪些不应该被缓存。
templatedivh1动态路由和 keep-alive/h1keep-alive :include[Home, About]router-view/router-view/keep-alive/div
/templatescript
export default {data() {return {// 只有 Home 和 About 组件会被缓存}},
}
/script路由配置
import { createRouter, createWebHistory } from vue-router;
import Home from ./components/Home.vue;
import About from ./components/About.vue;
import Contact from ./components/Contact.vue;const routes [{path: /,name: Home,component: Home,},{path: /about,name: About,component: About,},{path: /contact,name: Contact,component: Contact,},
];const router createRouter({history: createWebHistory(),routes,
});export default router;
同理
keep-alive :exclude[Contact]router-view/router-view
/keep-alive根据具体情况来控制缓存策略从而有效提升性能并节省内存。
总结使用 keep-alive 时路由切换时被缓存的组件会保持其状态。例如表单输入的数据、滚动位置等都不会丢失。为了确保在缓存组件时能保持状态可以使用 onActivated 和 onDeactivated 钩子函数执行一些操作。
