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>
相关推荐
excel3 小时前
🧩 Vue 3 watch 源码详解(含完整注释)
前端·javascript·vue.js
繁花与尘埃4 小时前
HTML5简介与基本骨架(本文为个人学习笔记,内容整理自哔哩哔哩UP主【非学者勿扰】的公开课程。 > 所有知识点归属原作者,仅作非商业用途分享)
笔记·学习·html5
Rock_yzh4 小时前
AI学习日记——卷积神经网络(CNN):完整实现与可视化分析
人工智能·python·深度学习·神经网络·学习·cnn
Test.X6 小时前
学习16天:pytest学习
学习·pytest
XISHI_TIANLAN6 小时前
【多模态学习】Q&A6: 什么是MOE架构?Router Z Loss函数是指什么?负载均衡损失(Load Balancing Loss)又是什么?
学习·算法·语言模型
智海观潮6 小时前
Spark RDD详解 —— RDD特性、lineage、缓存、checkpoint、依赖关系
大数据·缓存·spark
Diligence8156 小时前
计算机网络学习总结(二)应用层
学习·计算机网络
野犬寒鸦6 小时前
从零起步学习Redis || 第十章:主从复制的实现流程与常见问题处理方案深层解析
java·服务器·数据库·redis·后端·缓存
梁辰兴7 小时前
计算机操作系统:进程同步
网络·缓存·操作系统·进程·进程同步·计算机操作系统
小墨宝7 小时前
web前端学习LangGraph
前端·学习