Vue中 与keep-alive有关的生命周期

1.组件缓存
在开发Vue项目的时候，大部分组件是没必要多次渲染的，所以Vue提供了一个内置组件keep-alive来缓存组件内部状态，避免重新渲染，
如果没有缓存，每点击一次导航，内容区就会创建一个组件，该组件会经历整个生命周期，每点击一次，就会创建一个组件，比较浪费性能
在被keep-alive包含的组件/路由中，会多出两个生命周期的钩子：activated与deactivated。
一、Activated钩子调用时机:
官网说其是在服务器端渲染期间不被调用，说白了其就是在挂载后和更新前被调用的。但如果该组件中没有使用缓存，也就是没有被包裹的话，activated是不起作用的。
二、Deactivated钩子调用时机：
keep-alive组件停用时调用

app.vue

<template>
  <div id="app">
    <!-- 控制缓存与不缓存，路由添加  meta: {keepAlive: true} -->
    <!--要  缓存的路由-->
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>

    <!--不  缓存的路由-->
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>

<script>
export default {
  created() {
    this.$store.commit("initUser");
  },
};
</script>

router.js

 {
    path: "/order",
    name: "Order",
    meta: {
      keepAlive: true,
    },
    component: () => import("../views/Order.vue"),
  },

activated()与deactivated()
activated()与deactivated()是两个生命周期钩子(生命周期函数)。

activated()与deactivated()是路由组件所独有的两个生命周期钩子，用于捕获路由组件的激活状态。

activated路由组件被激活时触发。
deactivated路由组件失活时触发。