vue-cli keep-alive用法以及activated,deactivated

 keep-alive用法

<keep-alive>是Vue的內置組件，能在組件切換過程中將狀態保留在內存中，防止重復渲染DOM。

• include: 字符串或正則表達式。只有匹配的組件會被緩存。
• exclude: 字符串或正則表達式。任何匹配的組件都不會被緩存。

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/home/home'
import Header from '@/components/home/header'
import Citylist from '@/components/city/city-list'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home,
      meta: {
        keepAlive: true // 需要被緩存
      }
    },
    {
      path: '/Header',
      name: 'Header',
      component: Header,
      meta: {
        keepAlive: true // 需要被緩存
      }
    },
    {
        path:'/citylist',
        name:'citylist',
        component:Citylist,
        meta: {
        keepAlive: false // 不需要被緩存
      }
    }
  ]
})

這樣就需要在app.vue中這樣寫

<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>

<style>
</style>

這樣就實現了有效的控制是否緩存。

activated,deactivated

注意一點：activated,deactivated這兩個生命周期函數一定是要在使用了keep-alive組件后才會有的，否則則不存在

當引入keep-alive的時候，頁面第一次進入，鈎子的觸發順序created-> mounted-> activated，退出時觸發deactivated。當再次進入（前進或者后退）時，只觸發activated。

事件掛載的方法等，只執行一次的放在 mounted 中；組件每次進去執行的方法放在 activated 中， activated 中的不管是否需要緩存多會執行。