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>