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


Posted in Javascript onApril 16, 2020

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

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

总结

到此这篇关于vue中keep-alive内置组件缓存的实例代码的文章就介绍到这了,更多相关vue keep-alive内置组件缓存内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
yepnope.js 异步加载资源文件
Sep 08 Javascript
JSON 数据格式介绍
Jan 13 Javascript
基于JavaScript实现瀑布流布局(二)
Jan 26 Javascript
jQuery增加与删除table列的方法
Mar 01 Javascript
jQuery获取父元素及父节点的方法小结
Apr 14 Javascript
javascript和jQuery实现网页实时聊天的ajax长轮询
Jul 20 Javascript
JavaScript第一篇之实现按钮全选、功能
Aug 21 Javascript
20行JS代码实现网页刮刮乐效果
Jun 23 Javascript
javascript获取元素的计算样式
May 24 Javascript
微信小程序间使用navigator跳转传值问题实例分析
Mar 27 Javascript
vuex中store存储store.commit和store.dispatch的用法
Jul 24 Javascript
vue 监听窗口变化对页面部分元素重新渲染操作
Jul 28 Javascript
详解Nuxt内导航栏的两种实现方式
Apr 16 #Javascript
javascript设计模式 ? 职责链模式原理与用法实例分析
Apr 16 #Javascript
vue下canvas裁剪图片实例讲解
Apr 16 #Javascript
javascript设计模式 ? 代理模式原理与用法实例分析
Apr 16 #Javascript
js String.prototype.trim字符去前后空格的扩展
Aug 23 #Javascript
Vue Object 的变化侦测实现代码
Apr 15 #Javascript
Vue项目vscode 安装eslint插件的方法(代码自动修复)
Apr 15 #Javascript
You might like
解析php file_exists无效的解决办法
2013/06/26 PHP
一个完整的php文件上传类实例讲解
2015/10/27 PHP
php使用file函数、fseek函数读取大文件效率对比分析
2016/11/04 PHP
PHP创建自己的Composer包方法
2018/04/09 PHP
Jquery AJAX 框架的使用方法
2009/11/03 Javascript
jQuery示例收集
2010/11/05 Javascript
javascript中兼容主流浏览器的动态生成iframe方法
2014/05/05 Javascript
编写高质量JavaScript代码的基本要点
2016/03/02 Javascript
30分钟快速掌握Bootstrap框架
2016/05/24 Javascript
js简单时间比较的方法
2016/08/02 Javascript
node.js学习之base64编码解码
2016/10/21 Javascript
JavaScript 字符串常用操作小结(非常实用)
2016/11/30 Javascript
jquery操作ID带有变量的节点实例
2016/12/07 Javascript
前端js弹出框组件使用方法
2020/08/24 Javascript
JavaScript实现汉字转换为拼音的库文件示例
2016/12/22 Javascript
基于IView中on-change属性的使用详解
2018/03/15 Javascript
jQuery实现为动态添加的元素绑定事件实例分析
2018/09/07 jQuery
vue项目中将element-ui table表格写成组件的实现代码
2019/06/12 Javascript
JS中比Switch...Case更优雅的多条件判断写法
2019/09/05 Javascript
vue实现的封装全局filter并统一管理操作示例
2020/02/02 Javascript
python sys模块sys.path使用方法示例
2013/12/04 Python
Python环境下搭建属于自己的pip源的教程
2016/05/05 Python
python3实现抓取网页资源的 N 种方法
2017/05/02 Python
Python 字符串操作(string替换、删除、截取、复制、连接、比较、查找、包含、大小写转换、分割等)
2018/03/19 Python
Python 在字符串中加入变量的实例讲解
2018/05/02 Python
对python 多个分隔符split 的实例详解
2018/12/20 Python
Python Django框架实现应用添加logging日志操作示例
2019/05/17 Python
python关于矩阵重复赋值覆盖问题的解决方法
2019/07/19 Python
python求加权平均值的实例(附纯python写法)
2019/08/22 Python
Python 通过爬虫实现GitHub网页的模拟登录的示例代码
2020/08/17 Python
Python之字典对象的几种创建方法
2020/09/30 Python
瑞典多品牌连锁店:Johnells
2021/01/13 全球购物
寻找迷宫的一条出路,o通路;X:障碍
2016/07/10 面试题
电工技术比武方案
2014/05/11 职场文书
家长会标语
2014/06/24 职场文书
公司领导班子四风对照检查材料
2014/09/27 职场文书