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

2023-08-12 01:04:04 349

1.keep-alive

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

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

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

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

//组件

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

结合router使用

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

//需要缓存时



//不需要缓存时

//两组同时启用，只要在路由meta元信息中对keepAlive定义，就能自主控制是否需要缓存

//...router.js
exportdefaultnewRouter({
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操作的操作都可以）-->


show

hello



&.fade-enter-active,&.fade-leave-active
transition:all0.5sease
&.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使用详解,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

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

热门推荐

随机推荐