keep-alive的使用
新增属性:
include - 字符串或正则表达式;只有匹配的组件会被缓存。
exclude - 字符串或正则表达式;任何匹配的组件都不会被缓存 。
注意:include和exclude支持三种方式来有条件的缓存路由:采用逗号分隔符的字符串形式;正则形式;数组形式。
正则和数组形式,必须采用 v-bind 形式来使用
缓存组件的使用方式:
在更多场景中,我们会使用keep-alive来缓存路由:
注意:当组件被exclude匹配,该组件不会被缓存,不会调用activated和deactivated函数 。
新增生命周期钩子:
在被keep-alive包含的组件/路由中,会新增两个生命周期的钩子函数:activated与deactivated
activated():在组件第一次渲染时会被调用,之后在每次缓存组件被激活时调用。
deactivated():组件被停用(离开路由)时调用。
注意:使用了keep-alive就不会调用beforeDestroy(组件销毁前钩子)和destroyed(组件销毁),因为组件没被销毁,而是被缓存起来了。
缓存路由组件:
使用keep-alive可以将所有路径匹配到的路由组件都缓存起来,包括路由组件里面的组件,keep-alive大多数就是这种使用场景。然后可以利用include或者exclude属性来匹配那些组件被缓存或不被缓存。
或者利用另外一种方式来判断哪些组件被缓存或不被缓存
使用v-if通过路由元信息判断缓存哪些路由