详解Vue中组件的缓存


Posted in Javascript onApril 20, 2019

之前在《Vue一个案例引发的动态组件与全局事件绑定总结》这篇文章中简单提到过组件的缓存。当时只是简单的提供了一个解决问题的思路,并没有说到多少组件缓存的东西,今天我们就来详细说说组件的缓存。

组件化开发模式下,我们会把整个项目拆分成很多组件,然后按照合理的方式组织起来。

自然就存在组件之间的切换问题,Vue 中有个「动态组件」的概念,它能够让我们更好的实现组件的切换。

在实际的项目开发中,产品是不可能放过我们的,需求总是在不停的变化,如果你碰到那些不改需求的产品就嫁了吧,太难得了。

最近项目中需要实现一个保留上一次Tab 页的功能。如下图,当我选择 B 组件时,我希望从首页切换到设置页时,还会停留在 B 组件,而不是重新渲染为默认的 A 组件。

详解Vue中组件的缓存

首先我们可以使用内置组件 <component>实现动态组件的效果。

<template>
 <div>
   <button
    v-for="tab in tabs"
    :key="tab"
    @click="currentTab = tab"
   ></button>
  <component :is="currentTab"></component>
 </div>
</template>
<script>
export default {
 name: "Tab",
 data() {
  return {
   currentTab: "A",
   tabs: ['A','B']
  };
 }
};
</script>

这时,我们做到了两个组件之间的切换,但动态组件在切换的过程中,组件的实例都是「重新创建」的,而我们需要保留组件状态。

为了解决这个问题,你还需要使用 vue 内置组件 <keep-alive>。

keep-alive

keep-alive 包裹「动态组件」时,会缓存不活动的组件实例,而不是销毁它们。它是一个抽象的组件,它自身不会渲染成一个 DOM 元素,也不会出现在父组件链中。

值得注意的是 「动态组件」这四个字,它只有在包含动态组件时,才会产生效果。如果不是动态组件则会无效。比如下面这种用法是没有效果的。

<keep-alive>
  <my-component></my-component>
</keep-alive>

既然如此,我们来看看 keep-alive 常用的几种方式:

方案一: 使用内置组件 <component>。

<keep-alive>
 <component :is="view"></component>
</keep-alive>

方案二: 当出现条件判断时的子组件

<keep-alive>
 <comp-a v-if="a > 1"></comp-a>
 <comp-b v-else></comp-b>
</keep-alive>

方案三: 结合路由使用时

<keep-alive>
   <router-view></router-view>
 </keep-alive>

以上三种方式组件都会被缓存。另外一点需要注意的是,<keep-alive> 只能用在只有一个子组件的情况。如果你在其中有 v-for 则不会产生效果。

明白了如何使用 <keep-alive> 时,想要保留我们的 Tab 页,我们只需这么做即可。

<keep-alive>
  <router-view></router-view>
</keep-alive>

但是这里你会发现,我们把每一个组件都缓存了起来,不仅案例中的「设置页」被缓存连「首页」也一起被缓存了起来,这不是我们想要的。

vue 帮我们也考虑到了这一点,所以我们可以选择性的进行组件的缓存,也就是说你想让谁缓存,就让谁缓存,非常的自由与可配置。

原因是因为 <keep-alive> 提供了两个属性 include 与 exclude。

  1. include:只有名称匹配的组件会被缓存。
  2. exclude:任何名称匹配的组件都不会被缓存。

 二者都可以用逗号分隔字符串、正则表达式或一个数组来表示。

<keep-alive include="a,b"></keep-alive>
<keep-alive :include="/a|b/"></keep-alive>
<keep-alive :include="['a', 'b']"></keep-alive>

所以,结合 <keep-alive> 的 include 或 exclude属性,我们就可以轻易的选择需要缓存的组件。

<keep-alive include="system">
  <router-view></router-view>
</keep-alive>

这样我们就可以只缓存「设置页」,然后实现保留上次选择的 Tab 页。

以上所述是小编给大家介绍的Vue中组件的缓存详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js验证表单第二部分
Nov 25 Javascript
小议Function.apply() 之一------(函数的劫持与对象的复制)
Nov 30 Javascript
利用javascript/jquery对上传文件格式过滤的方法
Jul 25 Javascript
40个有创意的jQuery图片、内容滑动及弹出插件收藏集之一
Dec 31 Javascript
JavaScript的setAttribute兼容性问题解决方法
Nov 11 Javascript
JavaScript中的对象的extensible属性介绍
Dec 30 Javascript
实例讲解JavaScript中的this指向错误解决方法
Jun 13 Javascript
Javascript表单特效之十大常用原理性样例代码大总结
Jul 12 Javascript
微信小程序开发图片拖拽实例详解
May 05 Javascript
详解A标签中href=&quot;&quot;的几种用法
Aug 20 Javascript
Vant的安装和配合引入Vue.js项目里的方法步骤
Dec 05 Javascript
Vue中JS动画与Velocity.js的结合使用
Feb 13 Javascript
Node.js折腾记一:读指定文件夹,输出该文件夹的文件树详解
Apr 20 #Javascript
优雅地使用loading(推荐)
Apr 20 #Javascript
详解JavaScript的数据类型以及数据类型的转换
Apr 20 #Javascript
详解key在Vue列表渲染时究竟起到了什么作用
Apr 20 #Javascript
函数式编程入门实践(一)
Apr 20 #Javascript
vue路由对不同界面进行传参及跳转的总结
Apr 20 #Javascript
详解Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成)
Apr 20 #Javascript
You might like
UCenter 批量添加用户的php代码
2012/07/17 PHP
解析php安全性问题中的:Null 字符问题
2013/06/21 PHP
php中spl_autoload详解
2014/10/17 PHP
在SAE上搭建最新wordpress的方法
2014/12/21 PHP
php使用socket post数据到其它web服务器的方法
2015/06/02 PHP
PHP编写学校网站上新生注册登陆程序的实例分享
2016/03/21 PHP
如何修改yii2.0自带的user表为其它的表
2017/08/01 PHP
PHP设计模式之抽象工厂模式实例分析
2019/03/25 PHP
2010年最佳jQuery插件整理
2010/12/06 Javascript
YUI Compressor压缩JavaScript原理及微优化
2013/01/07 Javascript
jquery解析JSON数据示例代码
2014/03/17 Javascript
jQuery控制元素显示、隐藏、切换、滑动的方法总结
2015/04/16 Javascript
js点击列表文字对应该行显示背景颜色的实现代码
2015/08/05 Javascript
BootStrap和jQuery相结合实现可编辑表格
2016/04/21 Javascript
javascript实现右下角广告框效果
2017/02/01 Javascript
解决vue里碰到 $refs 的问题的方法
2017/07/13 Javascript
让网站自动生成章节目录索引的多个js代码
2018/01/07 Javascript
Angular设置别名alias的方法
2018/11/08 Javascript
微信小程序用户位置权限的获取方法(拒绝后提醒)
2018/11/15 Javascript
Vue数据绑定实例写法
2019/08/06 Javascript
mapboxgl区划标签避让不遮盖实现的代码详解
2020/07/01 Javascript
Python实现全局变量的两个解决方法
2014/07/03 Python
Python中的pprint折腾记
2015/01/21 Python
python基础之包的导入和__init__.py的介绍
2018/01/08 Python
详解Django之auth模块(用户认证)
2018/04/17 Python
django 扩展user用户字段inlines方式
2020/03/30 Python
Django admin 实现search_fields精确查询实例
2020/03/30 Python
美国隐形眼镜零售商:LensPure
2019/03/10 全球购物
台湾时尚彩瞳专门店:imeime
2019/08/16 全球购物
初入社会应届生求职信
2013/11/18 职场文书
校园活动策划书范文
2014/01/10 职场文书
中医学专业自荐信范文
2014/04/01 职场文书
优秀护士先进事迹
2014/05/08 职场文书
小学社会实践活动总结
2014/07/03 职场文书
通知的格式范文
2015/04/27 职场文书
何时使用Map来代替普通的JS对象
2021/04/29 Javascript