页面重载时Vue响应式未触发：异步操作不匹配问题排查

页面重载后表单字段为空的核心原因：

• 页面刷新时，父组件UserView的onBeforeMount发起的API请求是异步的，而子组件UserForm的onBeforeMount会同步执行，此时current_user.value还未拿到API返回的数据，导致model被赋值为空对象。
• 后续current_user更新时，model没有监听这个变化，视图无法同步更新。

方案1：监听current_user变化更新model #

在UserForm.vue中用watch监听current_user，数据就绪后自动更新表单模型：

<script setup lang="ts">
import { current_user } from "@/store";
import { ref, watch } from "vue";

const model = ref({});

// 监听current_user的变化，初始化时也执行一次
watch(current_user, (newUser) => {
  if (newUser) {
    model.value = { ...newUser };
  }
}, { immediate: true });
</script>

方案2：基于current_user创建响应式模型 #

如果不需要保留原始数据的独立副本，可用computed实现双向绑定，直接关联current_user：

<script setup lang="ts">
import { current_user } from "@/store";
import { computed } from "vue";

const model = computed({
  get() {
    return current_user.value || {};
  },
  set(val) {
    // 若需要同步修改回current_user，可在此处处理
    // current_user.value = val;
  }
});
</script>

方案3：路由守卫预加载数据 #

在路由配置中添加beforeEnter守卫，提前加载用户数据，确保进入路由时数据已就绪：

// router/index.ts
import { current_user } from "@/store";
import CaseResource from "@/path/to/CaseResource";

routes: [
    {
        path: "/users/:id",
        name: "users_view",
        component: UserView,
        props: true,
        beforeEnter: async (to) => {
          const user = await new CaseResource().find(to.params.id as string);
          current_user.value = user;
        },
        children: [
            {
                path: "edit",
                name: "edit_user",
                component: UserForm,
                props: true
            }
        ]
    }
]

这种方式下，UserForm的onBeforeMount能直接拿到已加载的current_user数据，无需额外处理。

内容的提问来源于stack exchange，提问作者Jonny Oliveira