Vue中 key keep-alive的实现原理


Posted in Javascript onSeptember 18, 2018

vue2.0提供了一个keep-alive组件用来缓存组件,避免多次加载相应的组件,减少性能消耗

keep-aliv是Vue.js的一个内置组件。它能够不活动的组件实例保存在内存中,而不是直接将其销毁,它是一个抽象组件,不会被渲染到真实DOM中,也不会出现在父组件链中。

它有两个生命周期:

  1. activated: keep-alive组件激活时调用
  2. deactivated: keep-alive组件停用时调用

它提供了include与exclude两个属性,允许组件有条件地进行缓存。

keep-alive key

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <script type="text/javascript" src="./vue.js"></script>
</head>
<body>
  <div id="app">
    <keep-alive>
      <child-component key="1" v-if="seen" name="1"></child-component>
      <child-component key="2" v-if="!seen" name="2"></child-component>
    </keep-alive>
    <button @click="toggle">toggle</button>
  </div>
  <script type="text/javascript">
    Vue.component('child-component', {
      template: `<input type="text" placeholder="enter">`,
      data() {
        return {}
      },
      props: ["name"],
      mounted() {
        console.log(`${this.name} mounted`)
      }
    })
    const vm = new Vue({
      el: "#app",
      data: {
        seen: true
      },
      methods: {
        toggle() {
          this.seen = !this.seen;
        }
      }
    })
  </script>
</body>
</html>

key是标识元素不再被复用,注意key是Vue中的一个保留的属性,不能作为prop传递给子组件,否则会在控制台看到Vue的报错

但是keep-alive标识不重复创建组件实例,也就是只会触发一次created mounted事件,

利用两者可以对组件的复用进行比较精细的管理

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Firefox 无法获取cssRules 的解决办法
Oct 11 Javascript
jquery+ashx无刷新GridView数据显示插件(实现分页、排序、过滤功能)
Apr 25 Javascript
onbeforeunload与onunload事件异同点总结
Jun 24 Javascript
JS冒泡事件的快速解决方法
Dec 16 Javascript
提取jquery的ready()方法单独使用示例
Mar 25 Javascript
JS将滑动门改为选项卡(需鼠标点击)的实现方法
Sep 27 Javascript
微信小程序 开发工具快捷键整理
Oct 31 Javascript
JavaScript之Canvas_动力节点Java学院整理
Jul 04 Javascript
浅谈Vue.js 组件中的v-on绑定自定义事件理解
Nov 17 Javascript
Vue组件之自定义事件的功能图解
Feb 01 Javascript
利用 JavaScript 实现并发控制的示例代码
Dec 31 Javascript
Vue-router编程式导航的两种实现代码
Mar 04 Vue.js
vue服务端渲染页面缓存和组件缓存的实例详解
Sep 18 #Javascript
从Vuex中取出数组赋值给新的数组,新数组push时报错的解决方法
Sep 18 #Javascript
vue服务端渲染添加缓存的方法
Sep 18 #Javascript
在Vuex使用dispatch和commit来调用mutations的区别详解
Sep 18 #Javascript
微信小程序开发之路由切换页面重定向问题
Sep 18 #Javascript
在小程序中使用canvas的方法示例
Sep 17 #Javascript
webpack4打包vue前端多页面项目
Sep 17 #Javascript
You might like
通过对服务器端特性的配置加强php的安全
2006/10/09 PHP
分页详解 从此分页无忧(PHP+mysql)
2007/11/23 PHP
PHP移动文件指针ftell()、fseek()、rewind()函数总结
2014/11/18 PHP
CodeIgniter框架验证码类库文件与用法示例
2017/03/18 PHP
实现laravel 插入操作日志到数据库的方法
2019/10/11 PHP
飞鱼(shqlsl) javascript作品集
2006/12/16 Javascript
Some tips of wmi scripting in jscript (1)
2007/04/03 Javascript
NodeJS制作爬虫全过程(续)
2014/12/22 NodeJs
JavaScript操作Oracle数据库示例
2015/03/06 Javascript
JavaScript的removeChild()函数用法详解
2015/12/27 Javascript
js获取页面引用的css样式表中的属性值方法(推荐)
2016/08/19 Javascript
浅谈移动端之js touch事件 手势滑动事件
2016/11/07 Javascript
angular2倒计时组件使用详解
2017/01/12 Javascript
JavaScript中一些特殊的字符运算
2017/08/17 Javascript
浅谈函数调用的不同方式,以及this的指向
2017/09/17 Javascript
bootstrap时间插件daterangepicker使用详解
2017/10/19 Javascript
jquery ajax异步提交表单数据的方法
2017/10/27 jQuery
基于jQuery实现Ajax验证用户名是否可用实例
2018/03/25 jQuery
Vue中使用vux配置代码详解
2018/09/16 Javascript
Vue组件教程之Toast(Vue.extend 方式)详解
2019/01/27 Javascript
jQuery实现的记住帐号密码功能完整示例
2019/08/03 jQuery
js布局实现单选按钮控件
2020/01/17 Javascript
Python常用库推荐
2016/12/04 Python
使用pandas 将DataFrame转化成dict
2019/12/10 Python
Python : turtle色彩控制实例详解
2020/01/19 Python
pytorch读取图像数据转成opencv格式实例
2020/06/02 Python
英国国家美术馆商店:National Gallery
2019/05/01 全球购物
您的时尚,您的生活方式:DTLR Villa
2019/12/25 全球购物
建筑设计所实习生自我鉴定
2013/09/25 职场文书
饲料采购员岗位职责
2013/12/19 职场文书
松材线虫病防治方案
2014/06/15 职场文书
房屋登记授权委托书范本
2014/10/09 职场文书
2015年乡镇工会工作总结
2015/05/19 职场文书
2015年路政工作总结
2015/05/22 职场文书
运动员代表致辞
2015/07/29 职场文书
Mysql 8.x 创建用户以及授予权限的操作记录
2022/04/18 MySQL