如何正确更新用作初始值的Vue组件Prop？

你当前通过Watcher监听父组件传入的items Prop，同步更新组件内部itemList的做法是完全合规且可靠的，符合Vue的设计规范。

原因很明确：Vue组件的data属性仅在初始化阶段赋值一次，当父组件更新Prop时，不会自动触发data的重新初始化，因此通过watch监听Prop变化并同步内部状态，是解决“既要本地修改数据，又要响应父组件更新”这类场景的常规手段。

1. 可写计算属性（Computed） #

如果你的itemList需要支持修改，可使用可写的computed属性替代data+watch的组合，它会自动响应Prop的变化，代码更简洁：

<script>
export default {
  props: ['items'],
  computed: {
    itemList: {
      get() {
        // 返回Prop的副本，避免直接修改原Prop
        return [...this.items]; 
        // 若为对象数组，需深拷贝：JSON.parse(JSON.stringify(this.items))
      },
      set(newVal) {
        // 处理内部修改逻辑，如需同步回父组件，可通过$emit通知
        // this.$emit('update:items', newVal);
      }
    }
  }
}
</script>

这种方式无需手动编写watch，computed会自动追踪items的变化并更新返回值。

2. Vue 3 Composition API 写法（若使用Vue 3） #

如果项目基于Vue 3的Composition API，可直接在setup中用watch监听Prop，同步到ref定义的状态：

<script setup>
import { ref, watch } from 'vue';

const props = defineProps(['items']);
const itemList = ref([...props.items]);

// 监听items变化，同步更新itemList
watch(() => props.items, (newItems) => {
  itemList.value = [...newItems];
}, { deep: true }); // 若items是对象数组，需开启deep监听
</script>

写法更直观，逻辑集中在setup中，适合复杂组件的状态管理。

无论采用哪种方式，都必须确保操作的是Prop的副本，绝对不能直接修改原Prop——这会破坏Vue的单向数据流原则，导致数据流向混乱、调试困难。如果需要将内部修改同步回父组件，应通过$emit事件通知父组件自行更新原数据。

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