vue组件 keep-alive 和 transition 使用详解


Posted in Javascript onOctober 11, 2019

1.keep-alive

能在组件切换过程中将状态保留在内存中,防止重复渲染DOM。

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

当组件在 内被切换,它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。

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

// 组件

export default {
 name: 'test-keep-alive',
 data () {
  return {
    includedComponents: "test-keep-alive"     //这句不能漏掉
  }
 }
}

<keep-alive include="test-keep-alive">
 <!-- 将缓存name为test-keep-alive的组件 -->
 <component></component>
</keep-alive>

<keep-alive include="a,b"> 
<!-- 将缓存name为a或者b的组件,结合动态组件使用 --> 
<component :is="view"></component> 
</keep-alive> 
<!-- 使用正则表达式,需使用v-bind --> 
<keep-alive :include="/a|b/"> 

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

结合router使用

这一段通常放在vue项目最外层的app.vue中 为了使所有组件都能很好的利用 这个是否需要缓存特性

//需要缓存时
<keep-alive>
  <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
//不需要缓存时
<router-view v-if="!$route.meta.keepAlive"></router-view>
//两组同时启用,只要在路由meta元信息中 对keepAlive定义,就能自主控制是否需要缓存

//...router.js
export default new Router({
 routes: [
  {
   path: '/',
   name: 'Hello',
   component: Hello,
   meta: {
    keepAlive: false // 不需要缓存
   }
  },
  {
   path: '/page1',
   name: 'Page1',
   component: Page1,
   meta: {
    keepAlive: true // 需要被缓存
   }
  }
 ]
})

2.transition

name - string,用于自动生成 CSS 过渡类名。例如:name: ‘fade' 将自动拓展为.fade-enter,.fade-enter-active等。默认类名为 “v”

元素作为单个元素/组件的过渡效果。 只会把过渡效果应用到其包裹的内容上,而不会额外渲染 DOM 元素,也不会出现在检测过的组件层级中。

Vue只有在插入,更新或者移除DOM元素时才会应用过渡效果。一般两类情况一个是利用CSS过渡或者动画,另一个是利用JavaScript钩子函数。

!-- 首先将要过渡的元素用transition包裹,并设置过渡的name,然后添加触发这个元素过渡的按钮(实际项目中不一定是按钮,任何能触发过渡组件的DOM操作的操作都可以) -->

<div>
 <button @click="show=!show">show</button>
 <transition name="fade">
  <p v-show="show">hello</p>
 </transition>
</div>

&.fade-enter-active, &.fade-leave-active
 transition: all 0.5s ease   
&.fade-enter, &.fade-leave-active
 opacity: 0

组件过渡过程中,会有四个CSS类名进行切换,这四个类名与上面transition的name属性有关,比如name=“fade”,会有如下四个CSS类名:

fade-enter:进入过渡的开始状态,元素被插入时生效,只应用一帧后立即删除;

fade-enter-active:进入过渡的结束状态,元素被插入时就生效,在过渡过程完成之后移除;

fade-leave:离开过渡的开始状态,元素被删除时触发,只应用一帧后立即删除;

fade-leave-active:离开过渡的结束状态,元素被删除时生效,离开过渡完成之后被删除;

从上面四个类名可以看出,fade-enter-activefade-leave-active在整个进入或离开过程中都有效,所以CSS的transition属性在这两个类下进行设置。

上面示例中,fade-enter和fade-leave-active类设置CSS为opacity:0,说明过渡刚进入和离开的时候透明度为0,即不显示。当然还可以设置其他的CSS属性

总结

以上所述是小编给大家介绍的vue组件 keep-alive 和 transition 使用详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
JavaScript 直接操作本地文件的实现代码
Dec 01 Javascript
js调试工具console.log()方法查看js代码的执行情况
Aug 08 Javascript
JavaScript获取伪元素(Pseudo-Element)属性的方法技巧
Mar 13 Javascript
javascript创建对象、对象继承的实用方式详解
Mar 08 Javascript
JS中常用的输出方式(五种)
Jun 12 Javascript
JavaScript循环_动力节点Java学院整理
Jun 28 Javascript
深入浅析javascript继承体系
Oct 23 Javascript
Vue使用vux-ui自定义表单验证遇到的问题及解决方法
May 10 Javascript
js中获取URL参数的共用方法getRequest()方法实例详解
Oct 24 Javascript
详解一个基于套接字实现长连接的express
Mar 28 Javascript
微信小程序实现录音时的麦克风动画效果实例
May 18 Javascript
springboot+vue实现文件上传下载
Nov 17 Vue.js
jquery将json转为数据字典的实例代码
Oct 11 #jQuery
JavaScript实现抖音罗盘时钟
Oct 11 #Javascript
javascript刷新父页面方法汇总详解
Oct 10 #Javascript
element form 校验数组每一项实例代码
Oct 10 #Javascript
使用Vue-cli3.0创建的项目 如何发布npm包
Oct 10 #Javascript
js判断复选框是否选中的方法示例【基于jQuery】
Oct 10 #jQuery
VUE注册全局组件和局部组件过程解析
Oct 10 #Javascript
You might like
全国FM电台频率大全 - 26 西藏自治区
2020/03/11 无线电
模拟xcopy的函数
2006/10/09 PHP
PHP学习笔记 用户注册模块用户类以及验证码类
2011/09/20 PHP
网站页面自动跳转实现方法PHP、JSP(下)
2010/08/01 Javascript
web性能优化之javascript性能调优
2012/12/28 Javascript
js 实现浏览历史记录示例
2014/04/20 Javascript
js控制href内容的连接内容的变化示例
2014/04/30 Javascript
探寻Javascript执行效率问题
2014/11/12 Javascript
jQuery源码解读之removeClass()方法分析
2015/02/20 Javascript
AngularJS基础学习笔记之表达式
2015/05/10 Javascript
easyui-datagrid特殊字符不能显示的处理方法
2017/04/12 Javascript
angular6的响应式表单的实现
2018/10/10 Javascript
详解Vue SSR( Vue2 + Koa2 + Webpack4)配置指南
2018/11/13 Javascript
利用百度echarts实现图表功能简单入门示例【附源码下载】
2019/06/10 Javascript
NodeJs实现简易WEB上传下载服务器
2019/08/10 NodeJs
解决layer.open后laydate失效的问题
2019/09/06 Javascript
vue 父组件通过v-model接收子组件的值的代码
2019/10/27 Javascript
vue实现简单瀑布流布局
2020/05/28 Javascript
[01:13]2014DOTA2西雅图邀请赛 舌尖上的TI4
2014/07/08 DOTA
[03:16]DOTA2完美大师赛主赛事首日集锦
2017/11/23 DOTA
Python中Threading用法详解
2017/12/27 Python
scrapy框架携带cookie访问淘宝购物车功能的实现代码
2020/07/07 Python
python绘制分布折线图的示例
2020/09/24 Python
解决python3输入的坑——input()
2020/12/05 Python
英国最受欢迎的价格比较网站之一:MoneySuperMarket
2018/12/19 全球购物
使用useBean标志初始化BEAN时如何接受初始化参数
2012/02/11 面试题
进程的查看和调度分别使用什么命令
2015/03/25 面试题
介绍下Lucene建立索引的过程
2016/03/02 面试题
小学教师学期末自我评价
2013/09/25 职场文书
2014植树节活动总结
2014/03/11 职场文书
企业党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
出纳工作检讨书范文
2014/12/27 职场文书
小学数学教师研修感悟
2015/11/18 职场文书
2016高校自主招生自荐信范文
2016/01/28 职场文书
团组织关系介绍信
2019/06/24 职场文书
微软发布Windows 11今年最大更新22H2(附 ISO 镜像官方下载)
2022/09/23 数码科技