如何确保Vue组件中Props的修改不会向上冒泡？

核心原因 #

对象和数组属于引用类型，如果直接把Props赋值给本地ref/reactive，本质只是复制了指向原数据的引用——修改嵌套属性时仍会操作父组件的原数据，所以会出现父组件被影响的情况。

正确隔离方案：深拷贝创建独立响应式状态 #

必须对Props进行深拷贝，生成完全独立的本地数据，同时保证其响应式特性，这样修改本地数据就不会牵连父组件。

方法1：原生structuredClone（适用于多数场景） #

在子组件中通过原生API深拷贝Props，再转为响应式状态：

<script setup>
import { reactive } from 'vue'

const props = defineProps({
  list: {
    type: Array,
    required: true
  }
})

// 深拷贝Props数组，生成独立的响应式本地状态
const localList = reactive(structuredClone(props.list))

// 子组件内修改本地数据，不会影响父组件
const addItem = () => {
  localList.push('hello')
}
</script>

<template>
  <div>
    <button @click="addItem">添加项</button>
    <ul>
      <li v-for="item in localList" :key="item">{{ item }}</li>
    </ul>
  </div>
</template>

方法2：lodash.cloneDeep（适用于复杂嵌套场景） #

如果数据包含structuredClone不支持的类型（如函数、Symbol），可以用lodash的深拷贝工具：

<script setup>
import { reactive } from 'vue'
import cloneDeep from 'lodash.clonedeep'

const props = defineProps({
  nestedData: {
    type: Object,
    required: true
  }
})

const localData = reactive(cloneDeep(props.nestedData))

// 修改本地嵌套属性
const updateName = () => {
  localData.user.name = '新名称'
}
</script>

方法3：监听Props变化同步本地数据（可选） #

如果需要父组件更新Props时，子组件本地数据同步更新，可添加watch监听：

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

const props = defineProps({
  list: Array
})

const localList = reactive(structuredClone(props.list))

// 监听Props变化，同步更新本地数据
watch(props.list, (newList) => {
  localList.length = 0
  localList.push(...structuredClone(newList))
}, { deep: true })
</script>

注意事项 #

• 深拷贝会带来一定性能开销，若数据量极大，需评估是否真的需要完全隔离，或考虑状态管理方案替代。
• 始终遵循Vue单向数据流原则：不要直接修改Props本身，操作深拷贝后的本地状态才是合规做法。

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