keep-alive用法
<keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和 <transition> 相似,<keep-alive> 是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在父组件链中。
当组件在 <keep-alive> 内被切换,它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。主要用于保留组件状态或避免重新渲染。
在项目中有些时候组件或页面会在使用过程中重复的使用(比如:有一些列表页和设置页面),这些页面在重复的使用中会不停的创建和销毁,比如在单页面应用中通过<router-view></router-view>不断的加载。
在这个时候我们需要的就是vue2.0提供了一个 keep-alive组件用来缓存组件,避免多次加载相应的组件,减少性能消耗
1.基本用法
<keep-alive> <component> </component> </keep-alive>
或则
<keep-alive> <router-view></router-view> </keep-alive>
注:在缓存的组件里面第一只有第一次进入组件是才会触发created等生命周期钩子函数,再下次进来时只会触发activated 和 deactivated
2.动态选择缓存
在有的时候我们需要动态选择那些组件需要缓存那些不需要,vue.2.1.0后提供了include/exclude两个属性 可以针对性缓存相应的组件
<keep-alive :include="includedComponents"> <router-view></router-view> </keep-alive>
注:缓存给我们带来了好处能大大缩减页面重构时间,但是也带来了其他的麻烦 那就是 内存损耗,所以请在适当的时候使用keep-alive