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即可

<script setup>
</script>