vue中keep-alive、activated的探討和使用詳解
在修改公司的一個專案的時候發現了activated這個東西,一直覺得很疑惑,之前也沒怎麼用過啊!官網的生命週期那也沒說過這東西啊!生命週期不就create mount update 和destory這幾個東東麼,怎麼多了個activate出來。
百思不得其解,於是去問了下度娘和查了下文件!恍然大悟,原來這東東是結合keep-alive這東東使用的,下面順便記錄一下。
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中其只會在首次載入該元件的時候起作用。
以上這篇vue中keep-alive、activated的探討和使用詳解就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支援我們。