vue中keep-alive內(nèi)置組件緩存的實(shí)例代碼

更新時(shí)間：2020年04月16日 09:35:04 作者：我是你的一根秀發(fā)

這篇文章主要介紹了vue中的keep-alive內(nèi)置組件緩存，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

需求：
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 做一樣的事情：請(qǐng)求數(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: `
     <div>
      <h1>home</h1>
      <p>{{ name }}</p>
      <button @click="name = '李四'">修改name為 李四</button>
     </div>
    `,
    //實(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: `
     <div>
      <h1>list</h1>
     </div>
    `,
		//激活緩存的時(shí)候打印組件能被看到
    created() {
     console.log("list created");
    },
		//緩存失活時(shí)打印 組件不能被看到
    beforeDestroy() {
     console.log("list beforeDestroy");
    },
   });
	//組件三
		Vue.component("about", {
    template: `
     <div>
      <h1>about</h1>
     </div>
    `,
		//激活緩存的時(shí)候打印組件能被看到
    created() {
     console.log("about created");
    },
		//緩存失活時(shí)打印 組件不能被看到
    beforeDestroy() {
     console.log("about beforeDestroy");
    },
   });

3.創(chuàng)建實(shí)例。

Vue.component("home", {
    data() {
     return {
      name: "張三",
     };
    },

body部分

<div id="app">
  //active是樣式來做高亮用v-bind來綁定
  //@click自定義事件將實(shí)例里的數(shù)據(jù)改為home
  //點(diǎn)擊的時(shí)候會(huì)觸發(fā)component內(nèi)置標(biāo)簽更換為home
   <button :class="{ active: curPage === 'home' }" @click="curPage = 'home'">
    home
   </button>
   <button :class="{ active: curPage === 'list' }" @click="curPage = 'list'">
    list
   </button>
   <button
    :class="{ active: curPage === 'about' }"
    @click="curPage = 'about'"
   >
    about
   </button>

   <hr />
   //用keep-alive內(nèi)置組件包裹c(diǎn)omponet內(nèi)置組件v-bind綁定max作用是最多緩存兩個(gè)
   <keep-alive :max="2">
    <component :is="curPage"></component>
   </keep-alive>
   //方法二
   //排除法排除了about只有home與list可以緩存
   //<keep-alive exclude="about">
   // <component :is="curPage"></component>
   //</keep-alive> 
   //方法三
   //選擇緩存法只有home與list可以被緩存
   //keep-alive include="home,list">
    //<component :is="curPage"></component>
   //</keep-alive>
  </div>

三種方法的具體用法在文章的開始的時(shí)候有介紹

總結(jié)

到此這篇關(guān)于vue中keep-alive內(nèi)置組件緩存的實(shí)例代碼的文章就介紹到這了,更多相關(guān)vue keep-alive內(nèi)置組件緩存內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: