Vue3:页面A搜索后跳转到页面B,然后从页面B退回页面A重新搜索,但是得到的页面B得刷新一下才会显示正确的数据

问题

Vue3: 从页面A进行搜索后跳转到页面B,然后从页面B退回页面A重新搜索,但是得到的页面B得刷新一下才会显示正确的数据。

  • 读取数据的代码格式大致如下(代码做了一些删减):

解决

  • 会出现上述情况,是因为渲染数据这个步骤没有出现在Vue实例的生命周期中合适的阶段,读取数据并渲染数据的步骤应该放在组件实例已经完全创建后。而上述代码把数据的声明放在了setup函数外,vue3的setup函数相当于vue2中的 beforeCreate 和created函数的结合,因此应该把数据的声明放在setup函数中。

  • 下图是vue2和vue3生命周期钩子函数的一个对比(图源网络):

  • 对于Vue3来说,可以直接使用语法糖,可以避免一些因生命周期函数使用不当而造成的错误,在script标签中加个setup即可

javascript 复制代码
<script setup>
</script>
相关推荐
Json____1 天前
家居装修 AI 智能咨询助手:让装修咨询从“大海捞针“变成“一问即答“
java·后端·vue3·it学习·wwwoop.com
liangshanbo12152 天前
面试题:什么是 Reflect?它解决了什么问题?
vue3·reflect
RuoyiOffice2 天前
SpringBoot3+Vue3 低代码业务表单:从拖拽设计、独立建表到审批与数据查询
spring boot·vue3·数据建模·flowable·版本管理·低代码表单·ruoyi office
RuoyiOffice2 天前
SpringBoot3 企业薪酬核算:考勤、绩效与薪资规则如何算出一张可解释的工资单
spring boot·vue3·规则引擎·hrm·ruoyi office·薪酬核算·薪资试算
RuoyiOffice9 天前
2026最推荐基于SpringBoot+Vue3的项目管理经营一体化:从商机、合同、任务与工时走到回款和利润
spring boot·项目管理·vue3·crm·合同管理·ruoyi office·项目经营
RuoyiOffice10 天前
SpringBoot+Vue3 节日主题换肤实战:一条参数换全站配色,节后自动还原
spring boot·vue3·spring boot 3·vben admin·ruoyi office·节日主题·换肤方案
RuoyiOffice12 天前
SpringBoot3+Vue3 流程抄送已读:打开详情消红点,待办与知会怎么分开
spring boot·vue3·flowable·spring boot 3·ruoyi office·流程抄送·已读回执
志尊宝12 天前
Vue3 零基础每日笔记(038):亲手封装 useDebounceFn 与 useThrottleFn——高频事件的流量阀
前端·javascript·vue·html·vue3
志尊宝13 天前
Vue3 零基础每日笔记(043):defineModel 与 defineExpose 的 TS 用法——3.4+ 新 API 进阶
前端·javascript·vue·html·vue3
RuoyiOffice14 天前
SpringBoot3+Vue3+Flowable 企业审批平台全链路:从表单设计、节点权限到移动审批怎么落地
spring boot·vue3·uniapp·springboot3·flowable·审批系统·ruoyi office