這篇文章主要講解了vue中keep-alive內(nèi)置組件緩存的用法，內(nèi)容清晰明了，對此有興趣的小伙伴可以學(xué)習(xí)一下，相信大家閱讀完之后會(huì)有幫助。
需求：
home 組件中有一個(gè) name 的 data 數(shù)據(jù)。這個(gè)數(shù)據(jù)修改之后，再切換到其他的組件。再切換到 home 組件，希望 home 中 name 這個(gè)值是之前修改過的值。希望組件有緩存。
keep-alive 的使用方式：
將要緩存的組件使用 keep-alive 包裹住即可。
keep-alive優(yōu)點(diǎn)的介紹：
1. 切換組件時(shí)，當(dāng)前組件不會(huì)觸發(fā)銷毀的生命周期鉤子。也就是說不會(huì)銷毀了。
2. 切換回來時(shí)，也不會(huì)重新創(chuàng)建。（既然都沒有被銷毀，哪里來的重新創(chuàng)建呢）
3. 會(huì)多出兩個(gè)生命周期的鉤子函數(shù)
a. activated 緩存激活 第一次會(huì)觸發(fā)、組件能被看到
一般根 created 做一樣的事情：請求數(shù)據(jù)
b.deactivated 緩存失活 組件不能被看到
一般根 beforeDestroy 做一樣的事情: 清除定時(shí)器、移除全局事件監(jiān)聽
4. 可以在 vue devtools 上看見組件的緩存情況
** keep-alive 的更多屬性設(shè)置**
1. include 包含
a. include=“組件1,組件2” 注意 逗號(hào)前后不要有空格
b. :include="[組件1, 組件2]"
c. :include="/^hello/"
2. exclude 排除
a. exclude=“組件1,組件2” 注意 逗號(hào)前后不要有空格
b. :exclude="[組件1, 組件2]"
c. :exclude="/^hello/"
3. max 規(guī)定大能緩存組件的數(shù)量，默認(rèn)是沒有限制的\
假定緩存隊(duì)列是 [home, list]
現(xiàn)在進(jìn)入about的時(shí)候 about 也會(huì)被緩存上，這時(shí)會(huì)將之前的第一個(gè)給排出去 [home, list, about] => [list, about] 先進(jìn)先出原則。
概念就這些上代碼
1.vue鏈接：https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js
2.創(chuàng)建組件。(三個(gè)組件)
重慶分公司
重慶分公司
//組件一
Vue.component("home", {
data() {
return {
name: "張三",
};
},
template: `
home
{{ name }}
`,
//實(shí)例創(chuàng)建完成的時(shí)候打印
created() {
console.log("home created");
},
//實(shí)例銷毀前的打印
beforeDestroy() {
console.log("home beforeDestroy");
},
//激活緩存的時(shí)候打印組件能被看到
activated() {
console.log("home activated");
},
//緩存失活時(shí)打印 組件不能被看到
deactivated() {
console.log("home deactivated");
},
});
//組件二
Vue.component("list", {
template: `
list
`,
//激活緩存的時(shí)候打印組件能被看到
created() {
console.log("list created");
},
//緩存失活時(shí)打印 組件不能被看到
beforeDestroy() {
console.log("list beforeDestroy");
},
});
//組件三
Vue.component("about", {
template: `
about
`,
//激活緩存的時(shí)候打印組件能被看到
created() {
console.log("about created");
},
//緩存失活時(shí)打印 組件不能被看到
beforeDestroy() {
console.log("about beforeDestroy");
},
});另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
