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

本文主要是介绍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>