vue中的keep-alive

前言：

      在我们项目中很多地方是需要使用缓存而不是直接重新加载的，比如说：我从首页进入，列表页面，列表页面再进入详情页面，在这个过程中，详情页面返回列表页面的时候我是希望可以看到我刚刚进来详情前的页面，而不是重新刷新，这样用户体验不好，在这里就需要keep-alive了，但是keep-alive的缓存的缓存的话是一直有缓存，在我从列表回到首页后。重新进入列表，我希望的是刷新的列表，而不是缓存的列表。这就是我这里的完整逻辑。

vue的keep-alive介绍：

有时候我们不希望组件被重新渲染影响使用体验；或者处于性能考虑，避免多次重复渲染降低性能。而是希望组件可以缓存下来,维持当前的状态。这时候就可以用到keep-alive组件。

官网解释：<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <transition> 相似，<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。 当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。 在 2.2.0 及其更高版本中，activated 和 deactivated 将会在 <keep-alive> 树内的所有嵌套组件中触发。 主要用于保留组件状态或避免重新渲染

keep-alive新增的声明周期：

activated：因为缓存导致 mounted和create 的方法不能正常使用，添加了他

deactivated：因为缓存导致 destory 的方法不能正常使用，添加了他

• 初次进入时：created > mounted > activated；退出后触发 deactivated
• 再次进入：会触发 activated；事件挂载的方法等，只执行一次的放在 mounted 中；组件每次进去执行的方法放在 activated 中

具体使用：

1. 在 router 目录下的 index.js 文件里添加 ，如果有children，在子路由里面写就够了

       meta: {
            keepAlive: false // 不需要缓存
      }

import Vue from 'vue'
import Router from 'vue-router'
const Home = resolve => require(['@/components/home/home'], resolve)
const Goods = resolve => require(['@/components/home/goods'], resolve)
const Ratings = resolve => require(['@/components/home/ratings'], resolve)
const Seller = resolve => require(['@/components/home/seller'], resolve)
 
Vue.use(Router)
 
export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
      redirect: 'goods',
      children: [
        {
          path: 'goods',
          name: 'goods',
          component: Goods,
          meta: {
        	keepAlive: false // 不需要缓存
      	  }
        },
        {
          path: 'ratings',
          name: 'ratings',
          component: Ratings,
          meta: {
        	keepAlive: true  // 需要缓存
      	  }
        },
        {
          path: 'seller',
          name: 'seller',
          component: Seller,
          meta: {
        	keepAlive: true  // 需要缓存
      	  }
        }
      ]
    }
  ]
})

2、在 App.vue 里面

<template>
  <div id="app">
  	<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 {
  name: 'App'
}
</script>