vue中keep-alive內(nèi)置組件緩存的用法

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

    template: `
     <div>
      <h2>home</h2>
      <p>{{ name }}</p>
      <button @click="name = '李四'">修改name為 李四</button>
     </div>
    `,
    //實(shí)例創(chuàng)建完成的時(shí)候打印
    created() {
     console.log("home created");
    },
    //實(shí)例銷(xiāo)毀前的打印
    beforeDestroy() {
     console.log("home beforeDestroy");
    },
    //激活緩存的時(shí)候打印組件能被看到
    activated() {
     console.log("home activated");
    },
    //緩存失活時(shí)打印 組件不能被看到
    deactivated() {
     console.log("home deactivated");
    },
   });
   //組件二
      Vue.component("list", {
    template: `
     <div>
      <h2>list</h2>
     </div>
    `,
		//激活緩存的時(shí)候打印組件能被看到
    created() {
     console.log("list created");
    },
		//緩存失活時(shí)打印 組件不能被看到
    beforeDestroy() {
     console.log("list beforeDestroy");
    },
   });
	//組件三
		Vue.component("about", {
    template: `
     <div>
      <h2>about</h2>
     </div>
    `,
		//激活緩存的時(shí)候打印組件能被看到
    created() {
     console.log("about created");
    },
		//緩存失活時(shí)打印 組件不能被看到
    beforeDestroy() {
     console.log("about beforeDestroy");
    },
   });

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

<div id="app">
  //active是樣式來(lái)做高亮用v-bind來(lái)綁定
  //@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>