Vue.js深层属性双向绑定：子组件Watcher首次点击触发两次并回退

问题原因分析 #

1. 本地状态与Props未建立响应式同步：子组件的localSelectedOptions仅在初始化时通过浅拷贝props.selectedOptions创建，后续父组件更新selectedOptions时，子组件的本地状态不会自动同步，导致状态不一致。
2. 首次交互的引用冲突：首次点击时，子组件将修改后的localSelectedOptions.value直接emit给父组件，父组件把selectedOptions.value赋值为该对象，此时父子组件的状态指向同一个引用。但由于子组件未监听Props变化，当Vue响应式系统追踪到引用变化时，会触发子组件的Watcher，而本地状态未同步最新的Props值，出现状态回退的假象。
3. Watcher触发逻辑问题：子组件的Watcher仅监听本地状态，但未处理Props更新后的同步逻辑，首次交互后的Props变化会触发响应式追踪，导致本地状态被错误重置。

解决方案 #

方案一：使用v-model语法糖简化双向绑定（推荐）

直接利用Vue的双向绑定语法糖，无需维护本地状态，避免引用冲突：

<!-- 父组件代码 -->
<template>
  <ShopProductOptions
    :options="options"
    v-model:selected-options="selectedOptions"
  />
</template>

<script setup>
import { ref } from 'vue';
const selectedOptions = ref({});
// 示例选项数据，根据实际业务替换
const options = ref([{ name: '尺寸', value: 'M' }, { name: '颜色', value: '红色' }]);
</script>

<!-- 子组件 ShopProductOptions 代码 -->
<template>
  <!-- 用选项唯一标识当key，禁止用index -->
  <div v-for="option in options" :key="option.name">
    <span
      class="option-item"
      @click="setSelectedOption(option.name, option.value)"
    >
      {{ option.name }}
    </span>
  </div>
</template>

<script setup>
const props = defineProps({
  options: Array,
  selectedOptions: Object
});

const emit = defineEmits(['update:selectedOptions']);

const setSelectedOption = (optionName, value) => {
  // 创建新对象，避免直接修改Props（Vue禁止修改Props）
  const newSelections = { ...props.selectedOptions, [optionName]: value };
  emit('update:selectedOptions', newSelections);
};
</script>

方案二：监听Props变化同步本地状态

如果必须维护本地状态，需添加Watcher监听Props变化，同步更新本地状态：

<!-- 子组件 ShopProductOptions 代码 -->
<script setup>
import { ref, watch } from 'vue';

const props = defineProps({
  options: Array,
  selectedOptions: Object
});

const localSelectedOptions = ref({ ...props.selectedOptions });
const emit = defineEmits(['update:selectedOptions']);

const setSelectedOption = (optionName, value) => {
  localSelectedOptions.value[optionName] = value;
  // 传递新对象，避免父子组件共享引用
  emit('update:selectedOptions', { ...localSelectedOptions.value });
};

// 监听Props变化，同步本地状态
watch(
  () => props.selectedOptions,
  (newVal) => {
    localSelectedOptions.value = { ...newVal };
  },
  { deep: true }
);

watch(localSelectedOptions, (newVal) => {
  console.log('Watcher triggered in child:', newVal);
}, { deep: true });
</script>

额外注意事项 #

• 禁止用index作为v-for的key，必须使用选项的唯一标识（如option.name），避免Vue列表渲染出现错误。
• 修改Props时永远不要直接修改Props对象，必须创建新对象后通过emit通知父组件更新。
• 尽量避免父子组件共享对象引用，传递新对象可减少响应式冲突。

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