企业官网建设流程全解析

丽水网站seo,什么网站做外贸最多的,便捷的大连网站建设,免费的个人简历模板wordVue 中 keep-alive 组件的生命周期钩子 本文来自于我关于 Vue生命周期钩子 的系列文章。欢迎阅读、点评与交流~ 1、Vue 中的生命周期钩子 2、Vue 中 keep-alive 组件的生命周期钩子 1. keep-alive 组件概述 keep-alive 是 Vue 的内置组件#xff0c;用于缓存不活动的组件实例…Vue 中 keep-alive 组件的生命周期钩子本文来自于我关于 Vue生命周期钩子 的系列文章。欢迎阅读、点评与交流~1、Vue 中的生命周期钩子2、Vue 中 keep-alive 组件的生命周期钩子1. keep-alive 组件概述keep-alive是 Vue 的内置组件用于缓存不活动的组件实例而不是销毁它们。这样可以保留组件状态避免重新渲染提高应用性能减少重复的 DOM 操作2. 基本用法template div keep-alive component :iscurrentComponent/component /keep-alive /div /template3. 专门的生命周期钩子被keep-alive包裹的组件会获得两个额外的生命周期钩子activated调用时机组件被激活从缓存中取出并插入到 DOM 中时调用使用场景重新获取数据、开启定时器、重新绑定事件等deactivated调用时机组件被停用从 DOM 中移除并存入缓存时调用使用场景清除定时器、取消事件监听、释放资源等4. 完整生命周期执行顺序首次加载// 组件第一次进入时created()→mounted()→activated()切换到其他组件当前组件被缓存// 当前组件被离开deactivated()再次切换回来// 再次进入缓存的组件activated()组件被销毁当离开路由或 keep-alive 被移除// 如果是直接离开路由deactivated()→beforeDestroy()→destroyed()// 注意如果组件被 keep-alive 缓存则不会触发 beforeDestroy 和 destroyed5. 实际示例template div button clicktoggle切换组件/button keep-alive ComponentA v-ifshowA / ComponentB v-else / /keep-alive /div /template script // ComponentA.vue export default { name: ComponentA, data() { return { timer: null, count: 0 } }, created() { console.log(ComponentA created) }, mounted() { console.log(ComponentA mounted) }, activated() { console.log(ComponentA activated) // 重新开启定时器 this.timer setInterval(() { this.count console.log(定时器运行中:, this.count) }, 1000) }, deactivated() { console.log(ComponentA deactivated) // 清除定时器 if (this.timer) { clearInterval(this.timer) this.timer null } }, beforeDestroy() { console.log(ComponentA beforeDestroy) }, destroyed() { console.log(ComponentA destroyed) } } /script6. keep-alive 的属性配置!-- 只缓存特定组件 -- keep-alive includeComponentA,ComponentB component :iscurrentComponent/component /keep-alive !-- 排除某些组件 -- keep-alive excludeComponentC component :iscurrentComponent/component /keep-alive !-- 使用正则表达式 -- keep-alive :include/ComponentA|ComponentB/ component :iscurrentComponent/component /keep-alive !-- 限制最大缓存实例数 -- keep-alive :max5 component :iscurrentComponent/component /keep-alive7. 与 Vue Router 结合使用// router.jsconstroutes[{path:/page1,component:Page1,meta:{keepAlive:true// 需要缓存}},{path:/page2,component:Page2,meta:{keepAlive:false// 不需要缓存}}]!-- App.vue -- template div idapp keep-alive router-view v-if$route.meta.keepAlive/router-view /keep-alive router-view v-if!$route.meta.keepAlive/router-view /div /template8. 注意事项和最佳实践注意事项name 属性必需组件必须有name选项才能被include/exclude匹配嵌套 keep-aliveVue 2.2.0 支持嵌套使用但应避免过度使用动态组件与component :is...结合时最有用内存管理注意内存泄漏及时在deactivated中清理资源最佳实践exportdefault{name:MyComponent,// 必须设置 namedata(){return{// 数据会被缓存}},activated(){// 可以在这里重新获取可能需要更新的数据if(this.needsRefresh){this.fetchData()}},deactivated(){// 清理工作this.cancelPendingRequests()clearInterval(this.timer)},methods:{// 如果需要刷新数据的逻辑fetchData(){// 获取数据},cancelPendingRequests(){// 取消未完成的请求}}}9. Vue 3 中的变化在 Vue 3 中keep-alive的用法基本保持不变但生命周期钩子名称有变化// Vue 3 Composition APIimport{onActivated,onDeactivated}fromvueexportdefault{setup(){onActivated((){console.log(组件被激活)})onDeactivated((){console.log(组件被停用)})}}总结keep-alive组件的生命周期钩子activated和deactivated为缓存组件提供了精确的控制能力。合理使用这些钩子可以有效管理组件状态、优化性能同时避免内存泄漏等问题。在实际开发中结合路由配置和动态组件可以创建出体验更流畅的单页应用。