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 相关文章推荐
Prototype 1.5.0_rc1 及 Prototype 1.5.0 Pre0小抄本
Sep 22 Javascript
js压缩工具 yuicompressor 使用教程
Mar 31 Javascript
jquery ajax同步异步的执行最终解决方案
Apr 26 Javascript
JavaScript基础知识学习笔记
Dec 02 Javascript
node.js中的http.request方法使用说明
Dec 14 Javascript
JavaScript实现标题栏文字轮播效果代码
Oct 24 Javascript
JavaScript表单验证实例之验证表单项是否为空
Jan 10 Javascript
分享js粘帖屏幕截图到web页面插件screenshot-paste
Aug 21 Javascript
jQuery实现的导航动画效果(附demo源码)
Apr 01 Javascript
深入浅析Extjs中store分组功能的使用方法
Apr 20 Javascript
js 性能优化之算法和流程控制
Feb 15 Javascript
生产制造追溯系统之在线打印功能
Jun 03 Javascript
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
网站当前的在线人数
2006/10/09 PHP
php中对xml读取的相关函数的介绍一
2008/06/05 PHP
PHP缓存技术的使用说明
2011/08/06 PHP
php代码收集表单内容并写入文件的代码
2012/01/29 PHP
逆序二维数组插入一元素的php代码
2012/06/08 PHP
用php来改写404错误页让你的页面更友好
2013/01/24 PHP
PHP重定向的3种方式
2013/03/07 PHP
php实现三级级联下拉框
2016/04/17 PHP
PHP单例模式简单用法示例
2017/06/23 PHP
关于Jquery操作Cookie取值错误的解决方法
2013/08/26 Javascript
JavaScript中如何通过arguments对象实现对象的重载
2014/05/12 Javascript
jquery计算鼠标和指定元素之间距离的方法
2015/06/26 Javascript
谈谈jQuery Ajax用法详解
2015/11/27 Javascript
基于JS2Image实现圣诞树代码
2015/12/24 Javascript
jQuery的promise与deferred对象在异步回调中的作用
2016/05/03 Javascript
JavaScript:Date类型全面解析
2016/05/19 Javascript
详解js运算符单竖杠“|”与“||”的用法和作用介绍
2016/11/04 Javascript
JQuery Ajax 异步操作之动态添加节点功能
2017/05/24 jQuery
解决webpack -p压缩打包react报语法错误的方法
2017/07/03 Javascript
详解ES6中的代理模式——Proxy
2018/01/08 Javascript
JS与CSS3实现图片响应鼠标移动放大效果示例
2018/05/04 Javascript
node和vue实现商城用户地址模块
2018/12/05 Javascript
Vue框架下引入ActiveX控件的问题解决
2019/03/25 Javascript
简单了解TypeScript中如何继承 Error 类
2019/06/21 Javascript
用vue 实现手机触屏滑动功能
2020/05/28 Javascript
[02:04]2016国际邀请赛中国区预选赛VG.R晋级之路
2016/07/01 DOTA
Python用GET方法上传文件
2015/03/10 Python
Python使用arrow库优雅地处理时间数据详解
2017/10/10 Python
python读取与写入csv格式文件的示例代码
2017/12/16 Python
python函数声明和调用定义及原理详解
2019/12/02 Python
Jupyter加载文件的实现方法
2020/04/14 Python
HTML5 实战PHP之Web页面表单设计
2011/10/09 HTML / CSS
教室标语大全
2014/06/21 职场文书
欢迎词范文
2015/01/27 职场文书
2016年第十四个公民道德宣传日活动总
2016/04/01 职场文书
go xorm框架的使用
2021/05/22 Golang