vue组件维生和过渡使用详解

　　


　　

　　

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

　　

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

　　

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

　　

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

　　 　　//组件 　　 　　出口默认{ 　　名称:“test-keep-alive”, 　　数据(){ 　　返回{ 　　includedComponents:“test-keep-alive”//这句不能漏掉 　　} 　　} 　　} 　　 　　& lt;点火电极包括=皌est-keep-alive”比; 　　& lt; !——将缓存名字为test-keep-alive的组件——比; 　　& lt; component> & lt;/component> 　　& lt;/keep-alive> 　　 　　& lt;点火电极包括=" a、b "比; 　　& lt; !——将缓存名字为或者b的组件,结合动态组件使用——比; 　　& lt;组件:="视图"祝辞& lt;/component> 　　& lt;/keep-alive> 　　& lt; !——使用正则表达式,需使用v-bind——比; 　　& lt;点火电极:包括="/| b/北? 　　& lt;组件:="视图"祝辞& lt;/component> 　　& lt;/keep-alive> 　　 　　

结合路由器使用
　　

　　

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

　　 　　//需要缓存时 　　& lt; keep-alive> 　　& lt; router-view v=" $ route.meta.keepAlive "祝辞& lt;/router-view> 　　& lt;/keep-alive>//不需要缓存时 　　& lt; router-view v=" ! route.meta.keepAlive美元”祝辞& lt;/router-view>//两组同时启用,只要在路由meta元信息中对keepAlive定义,就能自主控制是否需要缓存//璻outer.js 　　出口默认新路由器({ 　　路线:[ 　　{ 　　路径:“/? 　　名称:“你好”, 　　组件:你好, 　　元:{ 　　keepAlive:假//不需要缓存 　　} 　　}， 　　{ 　　路径:/所述, 　　名称:“所述”, 　　Page1组件:, 　　元:{//需keepAlive: true要被缓存 　　} 　　} 　　] 　　}) 　　 　　

2。过渡
　　

　　

名称字符串,用于自动生成CSS过渡类名,例如:名字:“褪色”将自动拓展为.fade-enter,。fade-enter-active等。默认类名为“v”

　　

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

　　

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

　　

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

　　 　　 　　& lt; div> 　　& lt;按钮@click=罢故?!秀”祝辞show 　　& lt;过渡的名字=巴噬北? 　　& lt; p v-show="显示"祝辞hello

　　& lt;/transition> 　　& lt;/div> 　　 　　和。fade-enter-active及.fade-leave-active 　　过渡:0.5秒 　　和。fade-enter及.fade-leave-active 　　透明度:0 　　
　　 　　

组件过渡过程中,会有四个CSS类名进行切换,这四个类名与上面过渡的名字属性有关,比如name=巴噬?会有如下四个CSS类名:

　　

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

　　

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

　　

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

　　

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

　　

从上面四个类名可以看的出,<代码> fade-enter-active 和<代码> fade-leave-active> 　　

　　

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

　　

　　

以上所述是小编给大家介绍的vue组件维生和过渡使用详解,希望对大家有所帮助,如果大家有任何疑问请给我留的言,小编会及时回复大家的。在此也非常感谢大家对网站的支持。

vue组件维生和过渡使用详解