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

所属分类: 网络编程 / JavaScript 阅读数: 1873
收藏 0 赞 0 分享

需求:
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>

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

更多精彩内容其他人还在看

Angular.js实现多个checkbox只能选择一个的方法示例

这篇文章主要给大家介绍了利用Angular.js实现多个checkbox只能选择一个的方法,文中给出了详细的示例代码,相信对大家具有一定的参考价值,下面来一起看看吧。
收藏 0 赞 0 分享

vuejs2.0运用原生js实现简单的拖拽元素功能示例

本篇文章主要介绍了vuejs2.0运用原生js实现简单的拖拽元素功能示例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
收藏 0 赞 0 分享

Angularjs分页查询的实现

本文给大家分享angularjs实现分页查询功能,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友参考下
收藏 0 赞 0 分享

angularjs实现多张图片上传并预览功能

这篇文章主要为大家详细介绍了angularjs实现多张图片上传并预览功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

canvas绘制多边形

本文主要分享了利用canvas画多边形的示例代码,具有很好的参考价值,下面跟着小编一起来看下吧
收藏 0 赞 0 分享

js实现导航吸顶效果

本文主要分享了js实现导航吸顶效果的示例代码,具有很好的参考价值,下面跟着小编一起来看下吧
收藏 0 赞 0 分享

angularjs点击图片放大实现上传图片预览

这篇文章主要为大家详细介绍了angularjs点击图片放大实现上传图片预览的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

js中开关变量使用实例

本文主要分享了js中开关变量使用实例的代码,具有很好的参考价值,下面跟着小编一起来看下吧
收藏 0 赞 0 分享

JS验证字符串功能

这篇文章主要介绍了JS验证字符串功能实例代码,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友可以参考下
收藏 0 赞 0 分享

js实现日历与定时器

本文主要介绍了js实现日历与定时器的示例代码,具有很好的参考价值,下面跟着小编一起来看下吧
收藏 0 赞 0 分享
查看更多