Vue3中Prop传入data后无法修改值？响应式与Proxy问题排查

问题场景 #

使用Vue3 + Pinia，组件结构为：

• 父组件XTableComponent：通过Pinia store加载数据，点击表格行按钮时，将当前行数据存入currentItem，传递给子组件XModalComponent的item Prop。
• 子组件XModalComponent：接收item Prop，将其赋值给内部的innerItem，通过输入框修改innerItem.something，但点击保存按钮后，console.log(this.innerItem)无法显示修改后的值。

原父组件代码 #

<template>
  ...表格结构，每行按钮绑定@click并传入当前行item
  <x-modal-component v-if="currentItem" :item="currentItem" ref="x-modal"></x-modal-component>
</template>

<script>
export default {
  data: () => {
    return {
      currentItem: {},
      // ❌ 错误：Pinia store不应放在data中
      itemListStore: useItemListStore()
    }
  },
  computed: {
    itemList() {
      return this.itemListStore.list
    }
  },
  methods: {
    showModal(item){
      this.currentItem = item
      this.$refs['x-modal'].show()
    }
  }
}
</script>

原子组件代码 #

<template>
  ...
  <input v-model:value="innerItem.something" type="text">
  <button @click="save">save</button>
</template>
<script>
export default {
  props: {
    item: Object
  },
  data: () => {
    return {
      innerItem: {}
    }
  },
  mounted() {
    // ❌ 错误：直接引用响应式Prop对象，且仅在mounted初始化，无法追踪Prop变化
    this.innerItem = this.item
  },
  methods: {
    save() {
      console.log(this.innerItem) // 无法显示修改后的值
    }
  }
}
</script>

错误原因分析 #

1. 父组件错误：Pinia store放入data导致双重响应式代理
   Pinia store实例本身已经是Vue3的响应式Proxy对象，将其放入data中会被Vue再次包装为响应式对象，导致双重代理，破坏原有响应式逻辑，可能引发数据更新异常。

2. 子组件错误：直接引用Prop的响应式对象

• 直接将this.item（响应式Proxy）赋值给innerItem，会让innerItem指向原数据的引用，修改innerItem会直接修改Pinia中的原数据，违反Vue单向数据流原则。
• 仅在mounted中初始化innerItem，无法监听item Prop的后续变化（虽然当前场景下v-if保证子组件仅渲染一次，但这不是健壮的写法）。
• 如果原item对象没有something属性，直接赋值innerItem.something时，虽然Vue3的Proxy支持新增属性追踪，但直接引用原响应式对象可能导致console.log时无法实时展示最新值（因为Proxy的特性，需要展开对象才能看到更新）。

修正方案 #

1. 修正父组件 #

将Pinia store从data中移除，改为在created钩子中获取：

<template>
  ...表格结构，每行按钮绑定@click并传入当前行item
  <x-modal-component v-if="currentItem" :item="currentItem" ref="x-modal"></x-modal-component>
</template>

<script>
export default {
  data: () => {
    return {
      currentItem: null // 初始化为null更合理，避免空对象导致v-if误判
    }
  },
  created() {
    // ✅ 在created中获取Pinia store，避免双重代理
    this.itemListStore = useItemListStore()
  },
  computed: {
    itemList() {
      return this.itemListStore.list
    }
  },
  methods: {
    showModal(item){
      this.currentItem = item
      this.$refs['x-modal'].show()
    }
  }
}
</script>

2. 修正子组件 #

• 使用深拷贝创建innerItem的独立副本，避免修改原Prop数据。
• 用watch监听item Prop的变化，实时更新innerItem。
• 简化v-model写法（可选，v-model:value也可正常工作）。

<template>
  ...
  <!-- ✅ 简化v-model写法，效果与v-model:value一致 -->
  <input v-model="innerItem.something" type="text">
  <button @click="save">save</button>
</template>
<script>
export default {
  props: {
    item: {
      type: Object,
      required: true // 明确必填，避免空值问题
    }
  },
  data: () => {
    return {
      innerItem: {}
    }
  },
  watch: {
    // ✅ 监听item Prop变化，实时更新innerItem副本
    item: {
      immediate: true, // 组件初始化时立即执行一次
      handler(newItem) {
        // ✅ 深拷贝创建独立副本，避免修改原数据
        this.innerItem = JSON.parse(JSON.stringify(newItem))
        // 如果原对象包含复杂类型（如Date、RegExp），推荐使用lodash的cloneDeep
        // this.innerItem = _.cloneDeep(newItem)
      }
    }
  },
  methods: {
    save() {
      // ✅ 此时innerItem是独立副本，修改后的值会正常显示
      console.log(this.innerItem)
      // 如需更新Pinia数据，可通过emit通知父组件，由父组件调用store的action
      // this.$emit('update-item', this.innerItem)
    }
  }
}
</script>

额外说明 #

• 单向数据流原则：子组件不应直接修改Prop传递的对象，如需更新数据，应通过$emit通知父组件，由父组件调用Pinia的action修改store数据。
• 深拷贝的选择：JSON.parse(JSON.stringify(newItem))适用于简单对象，若对象包含Date、RegExp、函数等复杂类型，建议使用lodash.cloneDeep或自定义深拷贝函数。
• 响应式对象的console.log：Vue3的响应式Proxy对象在console.log时会显示为Proxy包装的对象，需要点击展开才能看到最新的属性值，使用深拷贝后的普通对象则不会有此问题。

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