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 45种缓动效果 非常酷
Jun 28 Javascript
基于jquery的不规则矩形的排列实现代码
Apr 16 Javascript
JS仿hao123导航页面图片轮播效果
Sep 01 Javascript
JS+CSS3制作炫酷的弹窗效果
Nov 08 Javascript
JavaScript+Html5实现按钮复制文字到剪切板功能(手机网页兼容)
Mar 30 Javascript
使用requirejs模块化开发多页面一个入口js的使用方式
Jun 14 Javascript
为输入框加入数字js校验代码分享
Nov 02 Javascript
Vue实现内部组件轮播切换效果的示例代码
Apr 07 Javascript
小程序如何构建骨架屏
May 29 Javascript
Vue 请求传公共参数的操作
Jul 31 Javascript
利用 JavaScript 实现并发控制的示例代码
Dec 31 Javascript
vue监听键盘事件的相关总结
Jan 29 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
MAC下通过改apache配置文件切换php多版本的方法
2017/04/26 PHP
javascript面向对象编程(一) 实例代码
2010/06/25 Javascript
禁止你的左键复制实用技巧
2013/01/04 Javascript
JS上传前预览图片实例
2013/03/25 Javascript
JQuery筛选器全系列介绍
2013/08/27 Javascript
解决jquery中美元符号命名冲突问题
2014/01/08 Javascript
JS实现简洁、全兼容的拖动层实例
2015/05/13 Javascript
浅谈Jquery核心函数
2015/06/18 Javascript
Node.js模块封装及使用方法
2016/03/06 Javascript
一起学写js Calender日历控件
2016/04/14 Javascript
AJAX实现瀑布流触发分页与分页触发瀑布流的方法
2016/05/23 Javascript
js实现select选择框效果及美化
2016/08/19 Javascript
JS简单设置下拉选择框默认值的方法
2016/08/20 Javascript
用v-html解决Vue.js渲染中html标签不被解析的问题
2016/12/14 Javascript
Bootstarp 基础教程之表单部分实例代码
2017/02/03 Javascript
JavaScript实现弹窗效果代码分析
2017/03/09 Javascript
JS实现AES加密并与PHP互通的方法分析
2017/04/19 Javascript
浅谈在vue项目中如何定义全局变量和全局函数
2017/10/24 Javascript
vue动态绑定组件子父组件多表单验证功能的实现代码
2018/05/14 Javascript
详解Vue源码学习之callHook钩子函数
2018/07/25 Javascript
浅谈webpack 四个核心概念之Entry
2019/06/12 Javascript
windows实现npm和cnpm安装步骤
2019/10/24 Javascript
一个基于flask的web应用诞生 bootstrap框架美化(3)
2017/04/11 Python
Python简单读写Xls格式文档的方法示例
2018/08/17 Python
python自动化UI工具发送QQ消息的实例
2019/08/27 Python
numpy创建单位矩阵和对角矩阵的实例
2019/11/29 Python
浅谈django 模型类使用save()方法的好处与注意事项
2020/03/28 Python
使用tensorflow框架在Colab上跑通猫狗识别代码
2020/04/26 Python
Right-on官方网站:日本知名的休闲服装品牌
2019/07/12 全球购物
物业管理员岗位职责范文
2013/11/25 职场文书
爱情保证书范文
2014/02/01 职场文书
实习生评语
2014/04/26 职场文书
先进班组材料范文
2014/12/25 职场文书
党支部意见范文
2015/06/02 职场文书
在JavaScript中如何使用宏详解
2021/05/06 Javascript
关于Python使用turtle库画任意图的问题
2022/04/01 Python