Vue3中watchEffect间接修改prop是否合规？求最优方案

问题描述 #

组件接收Person对象作为Prop，转为Ref后创建computed属性。通过MultiSelect为Person分配任务时，父组件的Person对象自动更新，但computed的set方法中的emit并未触发。存在以下疑问：

1. 直接修改Prop是否违规？Vue未给出相关警告
2. 为什么computed的set方法没有触发？
3. 有没有更规范、更优的实现方案？

原代码 #

<script setup lang="ts">
interface PersonTaskLinkProps {
  modelValue: Person;
}
const props = withDefaults(defineProps<PersonTaskLinkProps>(), {});
const { modelValue } = toRefs(props);
const taskStore = useTaskStore();

const personModel = computed({
  get: () => {
    return modelValue.value;
  },
  set: (value) => {
    emit('update:modelValue', value);
  },
});

const selectedTasks = ref<TaskDTO[]>(
  personModel.value.taskIds.map(
    (taskId) => taskStore.getEntityById(taskId)! || []
  )
);

watchEffect(() => {
  personModel.value.taskIds = selectedTasks.value.map((task) => task.id);
});

const allTasks: TaskDTO[] = taskStore.allEntities;

const emit = defineEmits<{
  (event: 'update:modelValue', value: Person): void;
}>();
</script>
<template>
  <h5>Link Tasks</h5>
  <MultiSelect
    :title="$t('person.linkTasks')"
    v-model:selected-items="selectedTasks"
    :selectable-items="allTasks"
    options-label="title"
    options-value="id"
  />
</template>

问题分析与解答 #

1. 直接修改Prop是否违规？ #

属于违规操作，Vue的核心设计原则是单向数据流：Prop是父组件传递给子组件的只读数据，子组件不应该直接修改Prop——这会导致数据流向混乱，父组件与子组件的状态隐式同步，后续调试和维护会变得异常困难。

你没有收到警告，是因为你修改的是Prop对象的内部属性（taskIds），而非直接替换Prop的引用（比如modelValue.value = new Person()）。Vue仅会对Prop的引用替换行为发出警告，无法检测对象内部属性的修改，但这种操作依然违反单向数据流规范。

2. 为什么computed的set方法没触发？ #

你的personModel是computed属性，只有当你直接为personModel赋值（比如personModel.value = newPersonInstance）时，才会触发它的set方法。而你在watchEffect中执行的是personModel.value.taskIds = ...，这只是修改了personModel.value这个对象的内部属性，并没有替换整个对象，因此computed的set方法不会被触发。

父组件的Person对象自动更新，是因为你直接修改了引用类型Prop的内部属性，父组件的原对象会跟着改变，但这是不符合Vue规范的隐式状态更新。

3. 更优实现方案 #

严格遵循单向数据流，子组件不直接修改Prop，而是通过emit通知父组件完成数据更新。具体改造如下：

改造后代码

<script setup lang="ts">
interface PersonTaskLinkProps {
  modelValue: Person;
}
const props = withDefaults(defineProps<PersonTaskLinkProps>(), {});
const taskStore = useTaskStore();

// 先定义emit，避免变量提升问题
const emit = defineEmits<{
  (event: 'update:modelValue', value: Person): void;
}>();

// 初始化selectedTasks，并监听Prop变化同步更新
const selectedTasks = ref<TaskDTO[]>([]);
watch(() => props.modelValue, (newPerson) => {
  selectedTasks.value = newPerson.taskIds.map(
    taskId => taskStore.getEntityById(taskId)!
  );
}, { immediate: true });

// 监听selectedTasks变化，创建新的Person对象并通知父组件更新
watch(selectedTasks, (newSelectedTasks) => {
  // 必须创建新对象，禁止直接修改原Prop对象
  const updatedPerson = {
    ...props.modelValue,
    taskIds: newSelectedTasks.map(task => task.id)
  };
  emit('update:modelValue', updatedPerson);
}, { deep: true });

const allTasks: TaskDTO[] = taskStore.allEntities;
</script>
<template>
  <h5>Link Tasks</h5>
  <MultiSelect
    :title="$t('person.linkTasks')"
    v-model:selected-items="selectedTasks"
    :selectable-items="allTasks"
    options-label="title"
    options-value="id"
  />
</template>

方案优势

• 完全符合单向数据流规范，子组件仅做数据展示和事件通知，父组件掌控最终的数据更新逻辑
• 避免了引用类型隐式修改带来的状态混乱，代码逻辑更清晰、可维护
• 通过创建新对象触发emit，确保父组件能感知到数据变化（如果父组件使用了响应式监听，也能正常触发）

补充场景说明 #

如果子组件需要复杂的本地临时修改，可以先深拷贝Prop对象到本地状态，修改本地状态后再emit给父组件，同时监听Prop变化同步本地状态：

const localPerson = ref(JSON.parse(JSON.stringify(props.modelValue)));

// 监听Prop变化同步本地状态
watch(() => props.modelValue, (newPerson) => {
  localPerson.value = JSON.parse(JSON.stringify(newPerson));
});

// 修改本地状态后emit
const updatePerson = () => {
  emit('update:modelValue', {...localPerson.value});
};

这种方式适合需要在子组件内做大量临时修改的场景，同时保证数据流向的可控性。

内容的提问来源于stack exchange，提问作者Justin S.