当前位置: 首页 > news >正文

vue学习-14vue的路由缓存组件以及activated和deactivated生命周期钩子

在Vue.js中,使用路由的内置特性来控制组件的缓存,以提高应用程序性能。默认情况下,Vue Router不会缓存组件,但你可以通过以下方式启用组件缓存:

<keep-alive> 组件:<keep-alive> 是Vue.js的内置组件,可以用来缓存被包裹的组件。你可以将需要缓存的组件包裹在<keep-alive> 标签内。例如:

<router-view><keep-alive><component-to-cache></component-to-cache></keep-alive>
</router-view>//也可以变成
<!-- 路由组件(缓存)标签,include属性指定要缓存路由的组件名(缓存单个路由) -->
<keep-alive include="News">
<!-- 路由显示标签 --><router-view></router-view>
</keep-alive>
<!-- 缓存多个路由组件 -->
<!-- <keep-alive :include="['News','Message']"><router-view></router-view>
</keep-alive> -->

在这个示例中,<component-to-cache> 组件会被缓存,当你导航到其他页面再返回时,它的状态将保持不变。这样的情况我们实际在项目开发中经常会碰到这样的需求,当我跳转到另一个页面的时候,我想要返回到跳转到之前的页面,就可以利用路由缓存组件来完成。

路由配置中启用缓存:你也可以在Vue Router的路由配置中为特定路由启用缓存。通过在路由对象中使用 meta 属性,你可以定义一个 keepAlive 属性来启用或禁用缓存。例如:

const routes = [{path: '/some-route',component: SomeComponent,meta: {keepAlive: true, // 启用缓存},},// 其他路由配置
];

在这种情况下,当导航到 /some-route 时,SomeComponent 组件将被缓存。

利用vue第12篇 中的Home.vue文件

<template><div><h2>Home组件内容</h2><div><ul class="nav nav-tabs"><li><router-link class="list-group-item" active-class="active" to="/home/news">News</router-link></li><li><router-link class="list-group-item" active-class="active" to="/home/message">Message</router-link></li></ul><!-- 路由组件(缓存)标签,include属性指定要缓存路由的组件名(缓存单个路由) --><keep-alive include="News"><!-- 路由显示标签 --><router-view></router-view></keep-alive><!-- 缓存多个路由组件 --><!-- <keep-alive :include="['News','Message']"><router-view></router-view></keep-alive> --></div></div>
</template><script>export default {name: 'Home'}
</script><style></style>

vue的activated和deactivated生命周期钩子

==“activated” ==和 ==“deactivated” ==是组件的生命周期钩子,用于管理组件在激活和停用时的行为。这些钩子通常与Vue组件的路由相关,用于处理路由切换时的特定操作。

activated钩子:当一个使用Vue Router的路由进入到包含该组件的路由时,activated钩子会被触发。这通常用于执行需要在组件激活时进行的操作,例如数据加载或动画启动。例如,你可以在activated钩子中加载组件所需的数据。

export default {activated() {// 在组件被激活时执行的代码},
}

deactivated钩子:当一个路由离开包含该组件的路由时,deactivated钩子会被触发。这通常用于执行需要在组件停用时进行的清理操作,例如取消订阅或释放资源。

export default {deactivated() {// 在组件被停用时执行的代码},
}

这些钩子允许你在路由切换时管理组件的状态和行为,以提供更好的用户体验。请注意,这些钩子只在使用Vue Router进行路由管理时才会生效,如果你没有使用Vue Router,这些钩子可能不会生效
News.vue

<template><ul><li :style="{opacity}">欢迎学习Vue</li><li>news001 <input type="text" value=""/></li><li>news002 <input type="text" value=""/></li><li>news003 <input type="text" value=""/></li></ul>
</template><script>export default {name:'News',data() {return {opacity:1}},// beforeDestroy(){//     console.log("News组件即将被销毁了!!!");//     clearInterval(this.timer);// },// mounted(){//     this.timer=setInterval(() => {//         console.log("@@@@@@");//         this.opacity-=0.01;//         if (this.opacity<=0) {//             this.opacity=1;//         }//     }, 16);// }activated(){//新的生命周期钩子函数是路由组件独有的(激活路由的意思)console.log("News组件被激活了!!!");this.timer=setInterval(() => {this.opacity-=0.01;if (this.opacity<=0) {this.opacity=1;}}, 16);},deactivated(){//路由组件独有的生命周期钩子函数(取消激活路由的意思)console.log("News组件失活了!!!");clearInterval(this.timer);}}
</script><style></style>
http://www.lryc.cn/news/188368.html

相关文章:

  • 【opencv】windows10下opencv4.8.0-cuda版本源码编译教程
  • 31 数据分析(中)numpy介绍
  • 华为OD机考算法题:字符串划分
  • AF_UNIX和127.0.0.1(AF_INET)回环地址写数据速度对比(二)
  • “Python+”集成技术高光谱遥感数据处理与机器学习教程
  • centos7 快速搭建自测mysql环境 docker + mysql
  • c++视觉检测-----Canny边缘算子
  • 机器学习笔记 - 用于动作识别的网络TSN/TSM/SlowFast/R(2+1)D/3D MobileNetV2
  • mybatis批量插入
  • 软件‘小程序‘前台开发软件定制的知识|app网站搭建
  • HTML-注册页面
  • 17.(开发工具篇Gitlab)如何在Gitlab配置ssh key
  • ArcGIS/GeoScene脚本:基于粒子群优化的支持向量机分类模型
  • Python+Tkinter 图形化界面基础篇:添加图形和图像
  • 前端js八股文大全
  • [环境]Ubuntu20.04安装Ceres
  • ruoyi 若依 前端vue npm install 运行vue前端
  • 各大搜索引擎的User-Agent
  • codesys【按钮】
  • SSH在桌面会话启动应用程序
  • React的类式组件和函数式组件之间有什么区别?
  • codesys【读写轴参数】
  • Java架构师系统架构设计确定系统边界
  • pytorch实现经典神经网络:VGG16模型之初探
  • Newtonsoft.Json use
  • MySQL-3(9000字详解)
  • SLAM从入门到精通(3d 点云数据访问)
  • 如何在 Spring Boot 中提高应用程序的安全性
  • 【Vuex+ElementUI】
  • 多媒体播放软件 Infuse mac中文特点介绍