vuejs 的keepalive和页面之间数据传递的更改刷新
关于keep-alive的文章已经很多了,简单来说就是为了减少页面切换间频繁的重新加载问题。
在实际开发过程中,我们需要部分页面能够按照我们的需求进行刷新,通过选择设置keep-alive等,这些方案也很多。
但是个人感觉非常麻烦,而且,一般情况下通过路由传递参数进行刷新页面,因此,我个人认为完全可以全部使用keep-alive(按照官方文档而言,这个并没有在父级dom下进行渲染,应该不会有性能问题,可能不全面,希望有同学指正)
疑问点:网上大家都使用判断组件是否缓存的方式来做,vuejs官方给出的案例中,也提供了判断是否缓存组件匹配函数,因此,无法确定,每个组件都“主要用于保留组件状态或避免重新渲染。”这个做法是否好。
在vue中提供了钩子进行使用,对于keep-alive组件,激活时activated会被触发,除了第一次进入created被触发,后面都不会被触发,
因此,我们可以使用activated中进行参数获取来进行页面刷新。
例如:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | export default { name: 'Buy' , data () { return { parPrice:0, price:0 } }, created(){ //this.getParams() }, activated(){ this .getParams() }, components:{ 'v-header' :IHeader }, methods:{ getParams(){ let {parPrice,price} = this .$route.params if ( typeof parPrice !== 'number' ) return this .parPrice = parPrice this .price = price } } } |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
· DeepSeek 解答了困扰我五年的技术问题。时代确实变了!
· PPT革命!DeepSeek+Kimi=N小时工作5分钟完成?
· What?废柴, 还在本地部署DeepSeek吗?Are you kidding?
· DeepSeek企业级部署实战指南:从服务器选型到Dify私有化落地
· 程序员转型AI:行业分析