详解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 相关文章推荐
一些有用的JavaScript和jQuery的片段分享
Aug 23 Javascript
jQuery动画animate方法使用介绍
May 06 Javascript
鼠标滚轴控制文本框值的JS代码
Nov 19 Javascript
Jquery获取当前城市的天气信息
Aug 05 Javascript
jquery实现网页定位导航
Aug 23 Javascript
微信小程序开发之数据存储 参数传递 数据缓存
Apr 13 Javascript
javascript+html5+css3自定义提示窗口
Jun 21 Javascript
BootStrap点击保存后实现模态框自动关闭的思路(模态框)
Sep 26 Javascript
微信小程序发送短信验证码完整实例
Jan 07 Javascript
Vue设置长时间未操作登录自动到期返回登录页
Jan 22 Javascript
Vue项目配置跨域访问和代理proxy设置方式
Sep 08 Javascript
解析原生JS getComputedStyle
May 25 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
Windows下PHP5和Apache的安装与配置
2006/09/05 PHP
php操作csv文件代码实例汇总
2014/09/22 PHP
PHP实现json_decode不转义中文的方法
2017/05/20 PHP
PHP简单获取随机数的常用方法小结
2017/06/07 PHP
PHP实现的字符串匹配算法示例【sunday算法】
2017/12/19 PHP
PHP工厂模式简单实现方法示例
2018/05/23 PHP
PHP中散列密码的安全性分析
2019/07/26 PHP
php判断某个方法是否存在函数function_exists (),method_exists()与is_callable()区别与用法解析
2020/04/20 PHP
如何通过Apache在本地配置多个虚拟主机
2020/07/29 PHP
通过event对象的fromElement属性解决热区设置主实体的一个bug
2008/12/22 Javascript
Ext第一周 史上最强学习笔记---GridPanel(基础篇)
2008/12/29 Javascript
JS动态获取当前时间,并写到特定的区域
2013/05/03 Javascript
全面理解面向对象的 JavaScript(来自ibm)
2013/11/10 Javascript
js改变鼠标的形状和样式的方法
2014/03/31 Javascript
jQuery循环动画与获取组件尺寸的方法
2015/02/02 Javascript
用jquery快速解决IE输入框不能输入的问题
2016/10/04 Javascript
Ajax 加载数据 练习代码
2017/01/05 Javascript
超简单的Vue.js环境搭建教程
2017/03/17 Javascript
深入理解requireJS-实现一个简单的模块加载器
2018/01/15 Javascript
webpack4.0 入门实践教程
2018/10/08 Javascript
解决Layui数据表格的宽高问题
2019/09/28 Javascript
Python3中常用的处理时间和实现定时任务的方法的介绍
2015/04/07 Python
浅谈pandas筛选出表中满足另一个表所有条件的数据方法
2019/02/08 Python
python代码编写计算器小程序
2020/03/30 Python
pytorch使用指定GPU训练的实例
2019/08/19 Python
新西兰杂志订阅:isubscribe
2019/08/26 全球购物
Luxplus荷兰:以会员价购买美容产品等,独家优惠
2019/08/30 全球购物
理财计划书
2014/08/14 职场文书
乡镇组织委员个人整改措施
2014/09/16 职场文书
四风问题对照检查整改措施思想报告
2014/10/05 职场文书
教育实习指导教师评语
2014/12/31 职场文书
2015年度优秀员工自荐书
2015/03/06 职场文书
在校证明模板
2015/06/17 职场文书
中国文明网2015年“向国旗敬礼”活动网上签名寄语
2015/09/24 职场文书
《植树问题》教学反思
2016/03/03 职场文书
vue项目两种方式实现竖向表格的思路分析
2021/04/28 Vue.js