vue中keep-alive内置组件缓存的实例代码

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

    template: `
     <div>
      <h1>home</h1>
      <p>{{ name }}</p>
      <button @click="name = '李四'">修改name为 李四</button>
     </div>
    `,
    //实例创建完成的时候打印
    created() {
     console.log("home created");
    },
    //实例销毁前的打印
    beforeDestroy() {
     console.log("home beforeDestroy");
    },
    //激活缓存的时候打印组件能被看到
    activated() {
     console.log("home activated");
    },
    //缓存失活时打印 组件不能被看到
    deactivated() {
     console.log("home deactivated");
    },
   });
   //组件二
      Vue.component("list", {
    template: `
     <div>
      <h1>list</h1>
     </div>
    `,
		//激活缓存的时候打印组件能被看到
    created() {
     console.log("list created");
    },
		//缓存失活时打印 组件不能被看到
    beforeDestroy() {
     console.log("list beforeDestroy");
    },
   });
	//组件三
		Vue.component("about", {
    template: `
     <div>
      <h1>about</h1>
     </div>
    `,
		//激活缓存的时候打印组件能被看到
    created() {
     console.log("about created");
    },
		//缓存失活时打印 组件不能被看到
    beforeDestroy() {
     console.log("about beforeDestroy");
    },
   });

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

<div id="app">
  //active是样式来做高亮用v-bind来绑定
  //@click自定义事件将实例里的数据改为home
  //点击的时候会触发component内置标签更换为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内置组件包裹componet内置组件v-bind绑定max作用是最多缓存两个
   <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>