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 相关文章推荐
Tab页界面,用jQuery及Ajax技术实现
Sep 21 Javascript
jQuery ctrl+Enter shift+Enter实现代码
Feb 07 Javascript
如何判断鼠标是否在DIV的区域内
Nov 13 Javascript
JS实现的Select三级下拉菜单代码
Aug 20 Javascript
JavaScript使用readAsDataUrl方法预览图片
May 10 Javascript
JavaScript高阶函数_动力节点Java学院整理
Jun 28 Javascript
vuejs父子组件之间数据交互详解
Aug 09 Javascript
Webpack优化配置缩小文件搜索范围
Dec 25 Javascript
vue检测对象和数组的变化分析
Jun 30 Javascript
vue写h5页面的方法总结
Feb 12 Javascript
VUE实现图片验证码功能
Nov 18 Javascript
Promise静态四兄弟实现示例详解
Jul 07 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
php pki加密技术(openssl)详解
2013/07/01 PHP
PHP父类调用子类方法的代码例子
2014/04/09 PHP
php用ini_get获取php.ini里变量值的方法
2015/03/04 PHP
仿迅雷焦点广告效果(JQuery版)
2008/11/19 Javascript
最佳的addEvent事件绑定是怎样诞生的
2011/10/24 Javascript
js 浏览器事件介绍
2012/03/30 Javascript
jquery mobile changepage的三种传参方法介绍
2013/09/13 Javascript
jquery中ajax使用error调试错误的方法
2015/02/08 Javascript
JS中的forEach、$.each、map方法推荐
2016/04/05 Javascript
JavaScript基础重点(必看)
2016/07/09 Javascript
JS动态遍历json中所有键值对的方法(不知道属性名的情况)
2016/12/28 Javascript
详解Vue双向数据绑定原理解析
2017/09/11 Javascript
jQuery实现的电子时钟效果完整示例
2018/04/28 jQuery
小程序显示弹窗时禁止下层的内容滚动实现方法
2019/03/20 Javascript
详解50行代码,Node爬虫练手项目
2019/04/22 Javascript
ng-alain的sf如何自定义部件的流程
2020/06/12 Javascript
Python实现发送与接收邮件的方法详解
2018/03/28 Python
Python设计模式之迭代器模式原理与用法实例分析
2019/01/10 Python
python读文件的步骤
2019/10/08 Python
TensorFlow-gpu和opencv安装详细教程
2020/06/30 Python
谈谈对css属性box-sizing的了解
2017/01/04 HTML / CSS
CSS3实现酷炫的3D旋转透视效果
2019/11/21 HTML / CSS
html5 Canvas画图教程(7)—canvas里画曲线之quadraticCurveTo方法
2013/01/09 HTML / CSS
html5 css3网站菜单实现代码
2013/12/23 HTML / CSS
html5在移动端的屏幕适应问题示例探讨
2014/06/15 HTML / CSS
Java里面Pass by value和Pass by Reference是什么意思
2016/05/02 面试题
影视动画专业个人的自我评价
2013/12/31 职场文书
寒假思想汇报
2014/01/10 职场文书
环境工程专业自荐信范文
2014/03/18 职场文书
蛋糕店创业计划书范文
2014/09/21 职场文书
群众路线教育实践活动民主生活会个人检查对照思想汇报
2014/10/04 职场文书
群众路线自我剖析及整改措施
2014/11/04 职场文书
教研活动主持词
2015/07/03 职场文书
实习感想范文
2015/08/10 职场文书
2016思想纪律作风整顿心得体会
2016/01/23 职场文书
Mysql Online DDL的使用详解
2021/05/20 MySQL