认识keep-alive:
- 我们想频繁切换组件中component标签,组件会被频繁的创建和销毁。
<component :is='view'/>
- 我们不想这么频繁创建组件和销毁组件,并且保持组件的状态,这时就推荐使用内置组件:keep-alive
<keep-alive>
<component :is='view'/>
</keep-alive>
keep-alive属性
- include - string | RegExp(正则) | Array。只有名称匹配组件会被缓存
- exclude - string | RegExp(正则) | Array。任何名称匹配的组件都不会被缓存
- max - string | number。最多可以缓存多少组件实例,一旦达到这个数字,那么组件中醉经没有被访问的实例会被销毁;(很长时间每被访问的组件实例会被销毁)
<!-- 逗号分隔字符串 没有空格间隔 -->
<keep-alive include='a,b'>
<component :is='view'/>
</keep-alive>
<!-- RegExp(正则) 使用‘v-bind’ -->
<keep-alive :include='/a|b/'>
<component :is='view'/>
</keep-alive>
<!-- Array 使用‘v-bind’ -->
<keep-alive :include="['a','b']">
<component :is='view'/>
</keep-alive>
(注意:名称匹配的组件自身的name选项)
export default{
name:'view'
}
缓存组件的生命周期
想要监听切换组件推荐使用activated和deactivated
- activated:组件活跃时触发
- deactivated:组件不活跃触发
export default{
activated(){
console.log('activated')
},
deactivated(){
console.log('deactivated')
}
}