Vue中keep-alive的用法以及activated,deactivated

keep-alive的用法

在vue中切换组件的时候会自动销毁之前的组件，这样的话再切回之前的组件就要重新加载，数据什么的要重新请求接口，状态不能保留。

如图，从任务切换到缺陷，任务的列表就被销毁了，再次切到任务会重新加载组件。

<keep-alive>是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。

在路由中可以在meta中设置需要被缓存的组件。

import Vue from 'vue'
import Router from 'vue-router'
 
Vue.use(Router)
 
export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: () => import('@/components/home/home'),
      meta: {
        keepAlive: true // 需要被缓存
      }
    },
    {
      path: '/Header',
      name: 'Header',
      component: () => import('@/components/home/header'),
      meta: {
        keepAlive: true // 需要被缓存
      }
    },
    {
        path:'/citylist',
        name:'citylist',
        component: () => import('@/components/city/city-list'),
        meta: {
        keepAlive: false // 不需要被缓存
      }
    }
  ]
})

在组件中这样写。嵌套在keep-alive标签里面的组件不会被销毁，可以通过$route.meta获取到路由中的meta。

<template>
  <div id="app">
      <keep-alive>
          <router-view v-if="$route.meta.keepAlive"/>
      </keep-alive>
      <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>
 
<script>
export default {
  name: 'App'
}
</script>

keep-alive生命周期钩子函数：activated、deactivated

使用<keep-alive>会将数据保留在内存中，这样的话再次进入组件的时候created和mounted钩子就失效了。如果要在每次进入页面的时候获取最新的数据，需要在activated阶段获取数据，承担原来created钩子中获取数据的任务。

当引入keep-alive的时候，页面第一次进入，钩子的触发顺序created-> mounted-> activated，退出时触发deactivated。当再次进入（前进或者后退）时，只触发activated。

注意一点：activated,deactivated这两个生命周期函数一定是要在使用了keep-alive组件后才会有的，否则则不存在

vue-cli keep-alive用法以及activated,deactivated
Vue keep-alive实践总结