keep-alive是Vue提供的一个抽象组件，可以用来对组件进行缓存。有些页面不太会改变，但是每次当切换到这个页面时，页面都会重新发送请求，没有必要。所以我们可以将当前页面上的数据缓存起来，下次打开时不再需要发送请求。缓存数据可以使用防止页面重复渲染，避免反复渲染影响页面性能，同时也可以很大程度上减少接口请求，减小服务器压力。
keepAlive基本使用步骤
1.给需要缓存的组件添加name属性
<script>
export default {
name: 'find'
}
</script>2.定义缓冲，在需要缓冲的组件的路由出口用keepAlive把它包住，使用include属性，include=“name值”
<keep-alive include="find">
<router-view></router-view>
</keep-alive>keepAlive注意点
指定的缓存组件必须有name属性
include中设置多个组件时，千万不能加上空格
include用来给特定的组件缓存数据， exclude用来让特定的组件不缓存数据
keepAlive钩子函数
默认情况vue 会按时生命周期的顺序来依次执行钩子函数
打开页面时：分别执行 beforeCreate 、 created 、 beforeMoute 、 mouted
切换页面时：执行：beforeDestroy 、 destroyed
缓存后的组件除了第一次打开时，后面每次切换过来都不再执行上述函数，取而代之的是：
打开页面时：执行 activated切换页面时：执行 deactivated
缓存的组件被打开时：执行 activated
缓存的组件被切换时：执行 deactivated
总结：activated：激活时（显示时 只有在组件被缓存时才回触发） 第一次执行是在mounted之后执行,后面组件让缓存了,再次显示时,它会再次执行。deactivated：离开时（隐藏时 只有在组件被缓存时才回触发）组件让缓存了,当我们切换路由离开(隐藏)时,它会执行。
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
喜欢就支持以下吧
