keep-alive组件缓存

2020-09-26  本文已影响0人  黑白说程序

keep-alive是vue内置的组件,可以将组件进行缓存.,包括里面的子组件

使用方法:

<keep-alive><router-view></roure-view></keep-alive>

使用keep-alive之后 只有第一次加载组件会使用 beforeCreate 、created 、beforeMount 、mounted这四个生命周期函数,之后再调用组件,这些生命周期函数就会消失beforeCreate 、created 、beforeMount 、mounted、beforeDestroy、destroyed,这是因为组件已经被缓存了,所以不会再去创建载入销毁组件。但是在此调用这些组件beforeUpdate、updated生命函数会被调用

使用keepalive之后生命周期会激活activated、deactivated这俩个函数

activated:表示当前激活使用的组件,即进入这个组件

deactivated:表示组件停止使用时调用,即离开这个组件

注意

使用keepAlive之后无论是进入这个组件,还是离开这个组件都会激活 beforeUpdate、updated生命周期函数

keep-alive常用属性

include:匹配需要缓存的组件

exclude:排除不需要缓存的组件 <keep-alive exclude='name'><router-view/></keep-alive>

上一篇下一篇

猜你喜欢

热点阅读