vue.js内置组件之keep-alive组件使用


Posted in Javascript onJuly 10, 2018

keep-alive是Vue.js的一个内置组件。<keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。它自身不会渲染一个 DOM 元素,也不会出现在父组件链中。 当组件在 <keep-alive> 内被切换,它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。 它提供了include与exclude两个属性,允许组件有条件地进行缓存。

举个栗子

<keep-alive>
  <router-view v-if="$route.meta.keepAlive"></router-view>
 </keep-alive>
 <router-view v-if="!$route.meta.keepAlive"></router-view>

vue.js内置组件之keep-alive组件使用

在点击button时候,两个input会发生切换,但是这时候这两个输入框的状态会被缓存起来,input标签中的内容不会因为组件的切换而消失。

* include - 字符串或正则表达式。只有匹配的组件会被缓存。
* exclude - 字符串或正则表达式。任何匹配的组件都不会被缓存。

<keep-alive include="a">
 <component></component>
</keep-alive>

只缓存组件别民name为a的组件

<keep-alive exclude="a">
 <component></component>
</keep-alive>

除了name为a的组件,其他都缓存下来

生命周期钩子

生命钩子 keep-alive提供了两个生命钩子,分别是activated与deactivated。

因为keep-alive会将组件保存在内存中,并不会销毁以及重新创建,所以不会重新调用组件的created等方法,需要用activated与deactivated这两个生命钩子来得知当前组件是否处于活动状态。

深入keep-alive组件实现

vue.js内置组件之keep-alive组件使用 

查看vue--keep-alive组件源代码可以得到以下信息

created钩子会创建一个cache对象,用来作为缓存容器,保存vnode节点。

props: {
 include: patternTypes,
 exclude: patternTypes,
 max: [String, Number]
},
created () {
 // 创建缓存对象
 this.cache = Object.create(null)
 // 创建一个key别名数组(组件name)
 this.keys = []
},

destroyed钩子则在组件被销毁的时候清除cache缓存中的所有组件实例。

destroyed () {
 /* 遍历销毁所有缓存的组件实例*/
 for (const key in this.cache) {
  pruneCacheEntry(this.cache, key, this.keys)
 }
},

:::demo

render () {
 /* 获取插槽 */
 const slot = this.$slots.default
 /* 根据插槽获取第一个组件组件 */
 const vnode: VNode = getFirstComponentChild(slot)
 const componentOptions: ?VNodeComponentOptions = vnode && vnode.componentOptions
 if (componentOptions) {
 // 获取组件的名称(是否设置了组件名称name,没有则返回组件标签名称)
 const name: ?string = getComponentName(componentOptions)
 // 解构对象赋值常量
 const { include, exclude } = this
 if ( /* name不在inlcude中或者在exlude中则直接返回vnode */
  // not included
  (include && (!name || !matches(include, name))) ||
  // excluded
  (exclude && name && matches(exclude, name))
 ) {
  return vnode
 }
 const { cache, keys } = this
 const key: ?string = vnode.key == null
  // same constructor may get registered as different local components
  // so cid alone is not enough (#3269)
  ? componentOptions.Ctor.cid + (componentOptions.tag ? `::${componentOptions.tag}` : '')
  : vnode.key
 if (cache[key]) { // 判断当前是否有缓存,有则取缓存的实例,无则进行缓存
  vnode.componentInstance = cache[key].componentInstance
  // make current key freshest
  remove(keys, key)
  keys.push(key)
 } else {
  cache[key] = vnode
  keys.push(key)
  // 判断是否设置了最大缓存实例数量,超过则删除最老的数据,
  if (this.max && keys.length > parseInt(this.max)) {
  pruneCacheEntry(cache, keys[0], keys, this._vnode)
  }
 }
 // 给vnode打上缓存标记
 vnode.data.keepAlive = true
 }
 return vnode || (slot && slot[0])
}
// 销毁实例
function pruneCacheEntry (
 cache: VNodeCache,
 key: string,
 keys: Array<string>,
 current?: VNode
) {
 const cached = cache[key]
 if (cached && (!current || cached.tag !== current.tag)) {
 cached.componentInstance.$destroy()
 }
 cache[key] = null
 remove(keys, key)
}
// 缓存
function pruneCache (keepAliveInstance: any, filter: Function) {
 const { cache, keys, _vnode } = keepAliveInstance
 for (const key in cache) {
 const cachedNode: ?VNode = cache[key]
 if (cachedNode) {
  const name: ?string = getComponentName(cachedNode.componentOptions)
  // 组件name 不符合filler条件, 销毁实例,移除cahe
  if (name && !filter(name)) {
  pruneCacheEntry(cache, key, keys, _vnode)
  }
 }
 }
}
// 筛选过滤函数
function matches (pattern: string | RegExp | Array<string>, name: string): boolean {
 if (Array.isArray(pattern)) {
 return pattern.indexOf(name) > -1
 } else if (typeof pattern === 'string') {
 return pattern.split(',').indexOf(name) > -1
 } else if (isRegExp(pattern)) {
 return pattern.test(name)
 }
 /* istanbul ignore next */
 return false
}
// 检测 include 和 exclude 数据的变化,实时写入读取缓存或者删除
mounted () {
 this.$watch('include', val => {
 pruneCache(this, name => matches(val, name))
 })
 this.$watch('exclude', val => {
 pruneCache(this, name => !matches(val, name))
 })
},

:::

通过查看Vue源码可以看出,keep-alive默认传递3个属性,include 、exclude、max, max 最大可缓存的长度

结合源码我们可以实现一个可配置缓存的router-view

<!--exclude - 字符串或正则表达式。任何匹配的组件都不会被缓存。-->
<!--TODO 匹配首先检查组件自身的 name 选项,如果 name 选项不可用,则匹配它的局部注册名称-->
<keep-alive :exclude="keepAliveConf.value">
 <router-view class="child-view" :key="$route.fullPath"></router-view>
</keep-alive>
<!-- 或者 -->
<keep-alive :include="keepAliveConf.value">
 <router-view class="child-view" :key="$route.fullPath"></router-view>
</keep-alive>
<!-- 具体使用 include 还是exclude 根据项目是否需要缓存的页面数量多少来决定-->

创建一个keepAliveConf.js 放置需要匹配的组件名

// 路由组件命名集合
 var arr = ['component1', 'component2'];
 export default {value: routeList.join()};

配置重置缓存的全局方法

import keepAliveConf from 'keepAliveConf.js'
Vue.mixin({
 methods: {
 // 传入需要重置的组件名字
 resetKeepAive(name) {
  const conf = keepAliveConf.value;
  let arr = keepAliveConf.value.split(',');
  if (name && typeof name === 'string') {
   let i = arr.indexOf(name);
   if (i > -1) {
    arr.splice(i, 1);
    keepAliveConf.value = arr.join();
    setTimeout(() => {
     keepAliveConf.value = conf
    }, 500);
   }
  }
 },
 }
})

在合适的时机调用调用this.resetKeepAive(name),触发keep-alive销毁组件实例;

vue.js内置组件之keep-alive组件使用

Vue.js内部将DOM节点抽象成了一个个的VNode节点,keep-alive组件的缓存也是基于VNode节点的而不是直接存储DOM结构。它将满足条件的组件在cache对象中缓存起来,在需要重新渲染的时候再将vnode节点从cache对象中取出并渲染。

总结

以上所述是小编给大家介绍的vue.js内置组件之keep-alive组件使用,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
推荐10个超棒的jQuery工具提示插件
Oct 11 Javascript
jquery append()方法与html()方法的区别及使用介绍
Aug 01 Javascript
javascript中hasOwnProperty() 方法使用指南
Mar 09 Javascript
JQuery插件ajaxfileupload.js异步上传文件实例
May 19 Javascript
JavaScript中this的9种应用场景及三种复合应用场景
Sep 12 Javascript
jQuery对象与DOM对象转换方法详解
May 10 Javascript
Javascript基于jQuery UI实现选中区域拖拽效果
Nov 25 Javascript
微信小程序 Button 组件详解及简单实例
Jan 10 Javascript
Bootstrap Tree View简单而优雅的树结构组件实例解析
Jun 15 Javascript
基于vue框架手写一个notify插件实现通知功能的方法
Mar 31 Javascript
微信小程序image图片加载完成监听
Aug 31 Javascript
JavaScript隐式类型转换代码实例
May 29 Javascript
小程序图片剪裁加旋转的示例代码
Jul 10 #Javascript
vue使用中的内存泄漏【推荐】
Jul 10 #Javascript
Vue脚手架的简单使用实例
Jul 10 #Javascript
vue自定义移动端touch事件之点击、滑动、长按事件
Jul 10 #Javascript
微信小程序中换行空格(多个空格)写法详解
Jul 10 #Javascript
在小程序中使用腾讯视频插件播放教程视频的方法
Jul 10 #Javascript
Angular5中提取公共组件之radio list的实例代码
Jul 10 #Javascript
You might like
实用函数2
2007/11/08 PHP
PHPCrawl爬虫库实现抓取酷狗歌单的方法示例
2017/12/21 PHP
js原型链原理看图说明
2012/07/07 Javascript
JS定义类的六种方式详解
2016/05/12 Javascript
JS 调用微信扫一扫功能
2016/12/22 Javascript
jQuery实现select下拉框获取当前选中文本、值、索引
2017/05/08 jQuery
vue.js加载新的内容(实例代码)
2017/06/01 Javascript
简述jQuery Easyui一些用法
2017/08/01 jQuery
vue 实现的树形菜的实例代码
2018/03/19 Javascript
JS实现骰子3D旋转效果
2019/10/24 Javascript
vue-cli3项目配置eslint代码规范的完整步骤
2020/09/10 Javascript
[02:11]DOTA2上海特级锦标赛主赛事第二日RECAP
2016/03/04 DOTA
python cookielib 登录人人网的实现代码
2012/12/19 Python
Python实现FTP上传文件或文件夹实例(递归)
2017/01/16 Python
python 换位密码算法的实例详解
2017/07/19 Python
浅谈Pandas中map, applymap and apply的区别
2018/04/10 Python
解决python3 网络请求路径包含中文的问题
2018/05/10 Python
Python实现最常见加密方式详解
2019/07/13 Python
django基于存储在前端的token用户认证解析
2019/08/06 Python
Python队列、进程间通信、线程案例
2019/10/25 Python
Python 线性回归分析以及评价指标详解
2020/04/02 Python
pandas使用函数批量处理数据(map、apply、applymap)
2020/11/27 Python
纯CSS3单页切换导航菜单界面设计的简单实现
2016/08/16 HTML / CSS
iRobot官网:改变生活的家用机器人品牌
2016/09/20 全球购物
文员个人的求职信范文
2013/09/26 职场文书
成教自我鉴定
2013/10/27 职场文书
出国留学介绍信
2014/01/13 职场文书
运动会广播稿80字
2014/01/23 职场文书
试用期转正鉴定评语
2014/01/27 职场文书
高三体育教学反思
2014/01/29 职场文书
校园活动宣传方案
2014/03/28 职场文书
保护环境演讲稿
2014/05/10 职场文书
大学生学习计划书
2014/09/15 职场文书
乌镇导游词
2015/02/02 职场文书
司机岗位职责
2015/02/04 职场文书
MongoDB数据库的安装步骤
2021/06/18 MongoDB