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

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

<template> <div class='wrapper'> <ul class='content'></ul> <button @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元素。接著我們?cè)诼酚芍凶?cè)一下，再回到APP.vue中修改一下配置

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

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

如果是這樣的話所有的頁(yè)面都被緩存了，一些需要重新加載不需要緩存的我們可以通過(guò)v-for來(lái)實(shí)現(xiàn)。當(dāng)然我們可以在路由中設(shè)置一個(gè)key值來(lái)判斷組件是否需要緩存，就像下面這樣

//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í)候我們回到頁(yè)面中添加子元素并切換路由就會(huì)發(fā)現(xiàn)只有components1中的組件有緩存。

先說(shuō)下這個(gè)生命周期鉤子，官網(wǎng)說(shuō)其是在服務(wù)器端渲染期間不被調(diào)用，說(shuō)白了其就是在掛載后和更新前被調(diào)用的。但如果該組件中沒(méi)有使用緩存，也就是沒(méi)有被<keep-alive>包裹的話，activated是不起作用的。我們直接來(lái)試一下就知道了。

//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ù)'); }

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

在執(zhí)行components1時(shí)候其是執(zhí)行了activated鉤子函數(shù)的，而components2則沒(méi)有，因?yàn)閏omponents2并沒(méi)有被<keep-alive>包裹，所以其并不會(huì)激活該鉤子函數(shù)。

當(dāng)我們?cè)偾袚Q一次路由的時(shí)候又發(fā)現(xiàn)了神奇的地方

組件1中只執(zhí)行activated鉤子鉤子函數(shù)，而組件2則把創(chuàng)建和掛載的鉤子函數(shù)都執(zhí)行了。這就是緩存的原因，components其對(duì)組件進(jìn)行了緩存所以并不會(huì)再一次執(zhí)行創(chuàng)建和掛載。

簡(jiǎn)單的說(shuō)activated()函數(shù)就是一個(gè)頁(yè)面激活后的鉤子函數(shù)，一進(jìn)入頁(yè)面就觸發(fā)；

所以當(dāng)我們運(yùn)用了組件緩存時(shí)，如果想每次切換都發(fā)送一次請(qǐng)求的話，需要把請(qǐng)求函數(shù)寫(xiě)在activated中，而寫(xiě)在created或mounted中其只會(huì)在首次加載該組件的時(shí)候起作用。

keep-alive組件除了actived，還有deactived函數(shù)鉤子

類型：func

觸發(fā)時(shí)機(jī)：keep-alive組件激活時(shí)使用；

類型：func

觸發(fā)時(shí)機(jī)：keep-alive組件停用時(shí)調(diào)用；

以上就是vue中activated的用法的詳細(xì)內(nèi)容，更多關(guān)于vue activated用法的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！