Vue 3组合式API中子组件Props绑定影响父组件的问题咨询

问题背景 #

父组件初始化数据后，子组件通过Props接收数据并赋值给本地ref状态，修改本地状态时会同步影响父组件，甚至触发无限循环。尝试过Lodash.cloneDeep（因Props是Proxy对象未生效）、JSON.parse(JSON.stringify())取消响应式、浅拷贝特定属性等方案，但仍需更优解。

1. 不修改父组件Props的最优解决方案 #

要彻底切断本地状态与父组件Props的响应式关联，推荐以下两种可靠方案：

• 结合toRaw与深拷贝：Vue内置的toRaw方法可取出Proxy包裹的原始数据，再配合深拷贝完全脱离响应式绑定。若使用Lodash：

  import { ref, toRaw } from 'vue'
  import cloneDeep from 'lodash/cloneDeep'
  
  const props = defineProps(['parentData'])
  const localState = ref(cloneDeep(toRaw(props.parentData)))
  

  若不想引入第三方库，可使用浏览器原生的structuredClone（支持Date、Map等复杂数据类型）：

  import { ref, toRaw } from 'vue'
  
  const props = defineProps(['parentData'])
  const localState = ref(structuredClone(toRaw(props.parentData)))
  

• 浅拷贝（仅适用于扁平对象）：如果Props是无嵌套的扁平对象，可直接用扩展运算符结合toRaw：

  import { ref, toRaw } from 'vue'
  
  const props = defineProps(['parentData'])
  const localState = ref({ ...toRaw(props.parentData) })
  

2. 现象产生的核心原因 #

Vue 3的响应式系统基于Proxy实现，父组件传递的Props是被Proxy包裹的响应式对象。直接将Props赋值给本地ref时，并未复制对象本身，只是传递了Proxy的引用。此时修改本地状态的属性，本质是在操作Proxy指向的父组件原始数据，因此会同步更新父组件。

若子组件修改本地状态后，通过emit事件触发父组件数据更新，父组件Props变化又会重新赋值给本地状态，就会形成无限循环。

3. 强绑定方式的适用场景 #

直接引用Props作为本地状态的强绑定方式，仅适用于子组件仅做数据展示、无任何修改逻辑的场景：

• 纯展示型组件，仅负责渲染父组件传递的Props数据
• 数据的更新完全由父组件控制，子组件不需要维护独立的本地状态
  这种场景下直接使用Props即可，无需复制到本地ref，既节省内存又避免不必要的复杂度。

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