DDR爱好者之家

vue组件 keep-alive 和 transition 使用详解
站长资源 2024/11/24 佚名
29 1538
DDR爱好者之家 Design By 杰米

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-active和fade-leave-active在整个进入或离开过程中都有效，所以CSS的transition属性在这两个类下进行设置。

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

总结

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

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米