keep-alive

<keep-alive>包裹動態元件的時候，會快取不活動的元件例項，而不是摧毀他們。其是一個抽象的元件，自身不會渲染一個DOM元素，也不會出現在父元件鏈中。
說白了被<keep-alive>包裹的元件其會被快取
廢話不多說直接上例子.

我們現在建立兩個子元件conpoment1,compoment2,其內容如下

<template>
  <div class="wrapper">
    <ul class="content"></ul>
    <button class="add" id="add" @click="add">新增子元素</button>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    add() {
      let ul = document.getElementsByClassName("content")[0];  
      let li = document.createElement("li");
      li.innerHTML = "我是新增的元素";
      ul.appendChild(li);     
    }
  }
};
</script>
<style >
</style>
 

程式碼不用解釋了吧，就是點選按鈕在ul動態新增一個li元素。
接著我們在路由中註冊一下，再回到APP.vue中修改一下配置

<template>
  <div id="app">
    <keep-alive>
      <router-view />
    </keep-alive>
</template>

這樣我們就會發現，當我們切換路由的時候，我們之前新增的子元素還回儲存在那裡

如果是這樣的話所有的頁面都被快取了，一些需要重新載入不需要快取的我們可以通過v-for來實現。當然我們可以在路由中設定一個key值來判斷元件是否需要快取，就像下面這樣

//index.js
{
      path: '/1',
      name: 'components1',
      component: Components1,
      meta: {
        keepAlive: true   //判斷是否快取
      }
    },
    {
      path: '/2',
      name: 'components2',
      component: Components2,
      meta: {
         keepAlive: false
      }
    },

然後我們的App.vue中只需要判斷其keepAlive值即可

  <div id="app">
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive" />
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive" />
</template>

這時候我們回到頁面中新增子元素並切換路由就會發現只有components1中的元件有快取。

activated

先說下這個生命週期鉤子，官網說其是在伺服器端渲染期間不被呼叫，
說白了其就是在掛載後和更新前被呼叫的。但如果該元件中沒有使用快取，也就是沒有被<keep-alive>包裹的話，activated是不起作用的。我們直接來試一下就知道了。

//components1中
  created() {
    console.log("1啟用created鉤子函式");
  },
  activated() {
    console.log("1啟用activated鉤子函式");
  },
  mounted() {
    console.log("1啟用mounted鉤子函式");
  }

//components2中
  created() {
    console.log("2啟用created鉤子函式");
  },
  activated() {
    console.log("2啟用activated鉤子函式");
  },
  mounted() {
    console.log("2啟用mounted鉤子函式");
  }

我們在2個元件中分別打印出其鉤子函式執行情況。我們可以看到

在執行components1時候其是執行了activated鉤子函式的，而components2則沒有，因為components2並沒有被<keep-alive>包裹，所以其並不會啟用該鉤子函式。

當我們再切換一次路由的時候又發現了神奇的地方

元件1中只執行activated鉤子鉤子函式，而元件2則把建立和掛載的鉤子函式都執行了。
這就是快取的原因，components其對元件進行了快取所以並不會再一次執行建立和掛載。

簡單的說activated()函式就是一個頁面啟用後的鉤子函式，一進入頁面就觸發；

所以當我們運用了元件快取時，如果想每次切換都發送一次請求的話，需要把請求函式寫在activated中，而寫在created或mounted中其只會在首次載入該元件的時候起作用。