快捷導(dǎo)航

vue中keep-alive、activated的探討和使用詳解

更新時(shí)間：2020年07月26日 10:34:54 作者：0斌果0

這篇文章主要介紹了vue中keep-alive、activated的探討和使用詳解，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧

在修改公司的一個(gè)項(xiàng)目的時(shí)候發(fā)現(xiàn)了activated這個(gè)東西，一直覺得很疑惑，之前也沒怎么用過啊！官網(wǎng)的生命周期那也沒說過這東西?。∩芷诓痪蚦reate mount update 和destory這幾個(gè)東東么，怎么多了個(gè)activate出來。

百思不得其解，于是去問了下度娘和查了下文檔！恍然大悟，原來這東東是結(jié)合keep-alive這東東使用的，下面順便記錄一下。

keep-alive

<keep-alive>包裹動(dòng)態(tài)組件的時(shí)候，會(huì)緩存不活動(dòng)的組件實(shí)例，而不是摧毀他們。其是一個(gè)抽象的組件，自身不會(huì)渲染一個(gè)DOM元素，也不會(huì)出現(xiàn)在父組件鏈中。

說白了被<keep-alive>包裹的組件其會(huì)被緩存

廢話不多說直接上例子.

我們現(xiàn)在創(chuàng)建兩個(gè)子組件conpoment1,compoment2,其內(nèi)容如下

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

代碼不用解釋了吧，就是點(diǎn)擊按鈕在ul動(dòng)態(tài)添加一個(gè)li元素。

接著我們在路由中注冊一下，再回到APP.vue中修改一下配置

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

這樣我們就會(huì)發(fā)現(xiàn)，當(dāng)我們切換路由的時(shí)候，我們之前添加的子元素還回保存在那里

如果是這樣的話所有的頁面都被緩存了，一些需要重新加載不需要緩存的我們可以通過v-for來實(shí)現(xiàn)。當(dāng)然我們可以在路由中設(shè)置一個(gè)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>

這時(shí)候我們回到頁面中添加子元素并切換路由就會(huì)發(fā)現(xiàn)只有components1中的組件有緩存。

activated

先說下這個(gè)生命周期鉤子，官網(wǎng)說其是在服務(wù)器端渲染期間不被調(diào)用，

說白了其就是在掛載后和更新前被調(diào)用的。但如果該組件中沒有使用緩存，也就是沒有被<keep-alive>包裹的話，activated是不起作用的。我們直接來試一下就知道了。

//components1中
 created() {
  console.log("1激活created鉤子函數(shù)");
 },
 activated() {
  console.log("1激活activated鉤子函數(shù)");
 },
 mounted() {
  console.log("1激活mounted鉤子函數(shù)");
 }

//components2中
 created() {
  console.log("2激活created鉤子函數(shù)");
 },
 activated() {
  console.log("2激活activated鉤子函數(shù)");
 },
 mounted() {
  console.log("2激活mounted鉤子函數(shù)");
 }

我們在2個(gè)組件中分別打印出其鉤子函數(shù)執(zhí)行情況。我們可以看到