标签：about 缓存 console list alive keep vue 组件 home

需求：
home 组件中有一个 name 的 data 数据。这个数据修改之后，再切换到其他的组件。再切换到 home 组件，希望 home 中 name 这个值是之前修改过的值。希望组件有缓存。
keep-alive 的使用方式：
将要缓存的组件使用 keep-alive 包裹住即可。
keep-alive优点的介绍：
1. 切换组件时，当前组件不会触发销毁的生命周期钩子。也就是说不会销毁了。
2. 切换回来时，也不会重新创建。（既然都没有被销毁，哪里来的重新创建呢）
3. 会多出两个生命周期的钩子函数
a. activated 缓存激活 第一次会触发、组件能被看到
一般根 created 做一样的事情：请求数据
b.deactivated 缓存失活 组件不能被看到
一般根 beforeDestroy 做一样的事情: 清除定时器、移除全局事件监听
4. 可以在 vue devtools 上看见组件的缓存情况
** keep-alive 的更多属性设置**
1. include 包含
a. include=“组件1,组件2” 注意 逗号前后不要有空格
b. :include="[组件1, 组件2]"
c. :include="/^hello/"
2. exclude 排除
a. exclude=“组件1,组件2” 注意 逗号前后不要有空格
b. :exclude="[组件1, 组件2]"
c. :exclude="/^hello/"
3. max 规定最大能缓存组件的数量，默认是没有限制的\
假定缓存队列是 [home, list]
现在进入about的时候 about 也会被缓存上，这时会将之前的第一个给排出去 [home, list, about] => [list, about] 先进先出原则 。

概念就这些上代码

1.vue链接：https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js
2.创建组件。(三个组件)

//组件一
      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");
        },
      });

3.创建实例。

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

body部分

    <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>

三种方法的具体用法在文章的开始的时候有介绍

标签：about,缓存,console,list,alive,keep,vue,组件,home
来源： https://blog.csdn.net/weixin_45816830/article/details/105520708

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。