Vue3子组件未随父组件数据更新？响应式问题排查与解决

核心问题 #

子组件的setup函数中，url和name是组件初始化时基于props.person计算的静态值，不会自动跟踪props的变化。虽然Vue3的props本身具备响应式，但直接在setup中赋值的普通变量不绑定响应式，因此父组件更新person props时，子组件的url和name不会同步更新。

解决方案一：用computed创建响应式计算属性 #

修改子组件setup，通过computed包裹依赖props的计算逻辑，当props.person变化时，计算属性会自动重新求值：

<template>
  <router-link :to="url">{{ name }}</router-link>
</template>

<script lang="ts">
import { defineComponent, computed } from 'vue';
import { NameFormatter } from 'src/common/formatters';
import { Person } from './person.models';

export default defineComponent({
  props: {
    person: {
      required: true,
      type: Object as () => Person,
    },
  },
  setup(props) {
    return {
      url: computed(() => `/person/${props.person.slug}`),
      name: computed(() => NameFormatter.formatInverseName(props.person)),
    };
  },
});
</script>

解决方案二：直接在模板中使用props（更简洁） #

如果逻辑简单，可跳过setup变量赋值，直接在模板里引用props计算，Vue会自动处理响应式：

<template>
  <router-link :to="`/person/${person.slug}`">{{ NameFormatter.formatInverseName(person) }}</router-link>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { NameFormatter } from 'src/common/formatters';
import { Person } from './person.models';

export default defineComponent({
  props: {
    person: {
      required: true,
      type: Object as () => Person,
    },
  },
  setup() {
    return { NameFormatter }; // 将格式化工具暴露给模板
  },
});
</script>

父组件的两处修正 #

1. v-show无需加冒号，直接写v-show="!isLoading"即可（原代码:v-show会被当作绑定变量，可能导致显示异常）。
2. buildPerson方法变量名错误，应使用入参detailedPerson而非未定义的person：

methods: {
  buildPerson(detailedPerson: DetailedPerson): Person {
    return {
      slug: detailedPerson.slug,
      firstName: detailedPerson.firstName,
      lastName: detailedPerson.lastName,
    };
  },
}

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