Vue项目中使用keepAlive缓冲组件

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
喜欢就支持以下吧
点赞0赞赏
分享
评论 抢沙发