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

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

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

html 复制代码
<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 属性来启用或禁用缓存。例如:

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

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

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

html 复制代码
<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钩子中加载组件所需的数据。

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

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

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

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

News.vue

html 复制代码
<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>
相关推荐
艾德金的溪19 小时前
redis-7.4.6部署安装
前端·数据库·redis·缓存
小光学长19 小时前
基于Vue的2025年哈尔滨亚冬会志愿者管理系统5zqg6m36(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
hello kitty w19 小时前
Python学习(11) ----- Python的泛型
windows·python·学习
讽刺人生Yan19 小时前
RFSOC学习记录(五)带通采样定理
学习·fpga·rfsoc
我的offer在哪里20 小时前
Redis
数据库·redis·缓存
报错小能手20 小时前
linux学习笔记(49)Redis详解(1)
linux·笔记·学习
QT 小鲜肉20 小时前
【个人成长笔记】在本地Windows系统中如何正确使用adb pull命令,把Linux系统中的文件或文件夹复制到本地中(亲测有效)
linux·windows·笔记·学习·adb
麦麦大数据20 小时前
D027 v2 vue+django+neo4j 基于知识图谱红楼梦问答系统 (新增问关系功能;新增知识节点和关系管理功能,neo4j增删改查功能)
vue.js·django·问答系统·知识图谱·neo4j·图谱管理·neo4j增删改查
菜鸟una21 小时前
【瀑布流大全】分析原理及实现方式(微信小程序和网页都适用)
前端·css·vue.js·微信小程序·小程序·typescript
专注前端30年1 天前
2025 最新 Vue2/Vue3 高频面试题(10月最新版)
前端·javascript·vue.js·面试