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
喜欢就支持以下吧