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 相关文章推荐
用于table内容排序
Jul 21 Javascript
json简单介绍
Jun 10 Javascript
javascript显示隐藏层比较不错的方法分析
Sep 30 Javascript
jquery 绑定回车动作扑捉回车键触发的事件
Mar 26 Javascript
使用node.js 制作网站前台后台
Nov 13 Javascript
javascript实现的闭包简单实例
Jul 17 Javascript
JQuery自适应窗口大小导航菜单附源码下载
Sep 01 Javascript
使用jQuery制作基础的Web图片轮播效果
Apr 22 Javascript
jQuery实现的简单拖动层示例
Feb 22 Javascript
利用JS响应式修改vue实现页面的input值
Sep 02 Javascript
vue中配置scss全局变量的步骤
Dec 28 Vue.js
详解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中http_build_query 的一个问题
2012/03/25 PHP
浅谈web上存漏洞及原理分析、防范方法(安全文件上存方法)
2013/06/29 PHP
PHP图片自动裁切应付不同尺寸的显示
2014/10/16 PHP
PHP 读取和编写 XML
2014/11/19 PHP
PHP实现对二维数组某个键排序的方法
2016/09/14 PHP
Laravel框架Request、Response及Session操作示例
2019/05/06 PHP
用JavaScript玩转游戏物理(一)运动学模拟与粒子系统
2010/06/19 Javascript
基于javascript 闭包基础分享
2013/07/10 Javascript
推荐25个超炫的jQuery网格插件
2014/11/28 Javascript
js中判断变量类型函数typeof的用法总结
2016/08/09 Javascript
jQuery EasyUI编辑DataGrid用combobox实现多级联动
2016/08/29 Javascript
jQuery文本框得到与失去焦点动态改变样式效果
2016/09/08 Javascript
JS获取当前地理位置的方法
2017/10/25 Javascript
jQuery+CSS实现的标签页效果示例【测试可用】
2018/08/14 jQuery
详解vue-cli 3.0 build包太大导致首屏过长的解决方案
2018/11/10 Javascript
小程序登录之支付宝授权的实现示例
2019/12/13 Javascript
vue+canvas实现移动端手写签名
2020/05/21 Javascript
JavaScript 判断数据类型的4种方法
2020/09/11 Javascript
[55:45]DOTA2上海特级锦标赛D组败者赛 Liquid VS COL第一局
2016/02/28 DOTA
[01:19:46]EG vs Secret 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
详解Python编程中基本的数学计算使用
2016/02/04 Python
python利用MethodType绑定方法到类示例代码
2017/08/27 Python
python如何发布自已pip项目的方法步骤
2018/10/09 Python
Python利用递归实现文件的复制方法
2018/10/27 Python
Python中使用遍历在列表中添加字典遇到的坑
2019/02/27 Python
pandas 缺失值与空值处理的实现方法
2019/10/12 Python
Python实现Appium端口检测与释放的实现
2020/12/31 Python
Python爬虫设置Cookie解决网站拦截并爬取蚂蚁短租的问题
2021/02/22 Python
HTML5+CSS3实现机器猫
2016/10/17 HTML / CSS
旅游管理本科生求职信
2013/10/14 职场文书
舞蹈毕业生的自我评价
2014/03/05 职场文书
试用期自我鉴定范文
2014/03/20 职场文书
2015年保安个人工作总结
2015/04/02 职场文书
老人院义工活动感想
2015/08/07 职场文书
django注册用邮箱发送验证码的实现
2021/04/18 Python
mysqldump进行数据备份详解
2022/07/15 MySQL