keepalive

关于keep alive

hi大家好这里是社会你戈今天为大家带来keepalive的介绍 话不多说 我们开始吧

keep-alive是什么？

keep-alive是vue.js提供给我们的一个内置组件，它可以用来在路由切换的时候缓存组件的状态，包裹动态组件的时候，缓存不活动的组件实例，是缓存而不是销毁

我举一个栗子来说 比如说我们浏览淘宝 一直往下看 看到一半你突然看见了《如何让自己变帅》 你非常感兴趣(我也感兴趣) 然后你就点击了进去 然后发现是骗人的 然后你非常难受 返回去了 这时候你发现你还是在刚点击的位置 没有换位置 这就是keep-alive的作用了

keep-alive的用法

第一种：直接把包裹住路由标签,缓存所有的路由

第二种：在路由文件中在路由里面，写上一个meta对象在meta对象里面写一个属性，keepAlive:true，如果为true就是缓存，如果为false就是不缓存

组件内：

写一个判断 如果$store.router.meta.keepAlive为true就显示包裹住的 如果为false则显示不包裹住的

keepalive生命周期

1.activated：页面第一次进入的时候，钩子触发的顺序是created->mounted->activated
2.deactivated ：页面退出的时候会触发deactivated，当再次前进或者后退的时候只触发activated

es6新增了两个属性
include: 只有匹配的组件会被缓存。
exclude: 任何匹配的组件都不会被缓存。