Props不可直接修改，因Vue通过数据劫持实现只读代理；需深拷贝保障子组件编辑安全，推荐Lodash cloneDeep或structuredClone，并结合reactive保持响应式。
Vue.js 中组件通信的核心是单向数据流，Props 是父传子的官方推荐方式。但直接传递引用类型（如对象、数组）时，子组件若意外修改了 props，不仅破坏响应式原则，还可能引发难以追踪的副作用。这时，数据劫持（Vue 的响应式系统底层机制）与 深拷贝 就成为保障数据安全和可预测性的关键手段。
Props 为什么不能直接修改？
Vue 对传入的 props 做了只读代理（在开发模式下会警告），本质是利用 Object.defineProperty 或 Proxy 实现的数据劫持——当尝试赋值给 props 属性时，Vue 拦截并报错。这不是限制能力，而是强制“单向流动”设计哲学：子组件应通过事件（$emit）通知父组件变更意图，由父组件决定是否更新源数据。
- 修改 props 对象内部属性（如
props.user.name = 'new'）虽不报错，但会污染原始数据，违背数据流可控性 - 父组件重新渲染时，被篡改的 props 可能被覆盖，造成状态不一致
- 在 Composition API 中，
defineProps()返回的也是只读代理，同样受保护
什么时候需要深拷贝？
当子组件需要对传入的对象或数组做本地编辑（如表单编辑、临时排序、筛选），又不想影响父组件数据时，必须创建独立副本。浅拷贝（如 {...obj} 或 Array.from(arr)）只能复制第一层，嵌套对象仍共享引用，无法真正隔离。
- 表单场景：父组件传入用户信息对象，子组件需支持编辑并提供“取消”功能 → 必须深拷贝保留原始快照
- 配置类组件：接收一组可配置项（含嵌套结构），子组件需自由增删改而不影响全局配置
- 避免响应式干扰：深拷贝后的数据脱离 Vue 响应式系统（除非显式用
reactive()包裹），适合纯逻辑处理
如何安全地深拷贝并保持响应式？
深拷贝不是万能解药，需结合使用场景权衡。Vue 官方不内置深拷贝方法，但有成熟方案：
将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.
-
JSON 序列化反序列化：简单对象可用
JSON.parse(JSON.stringify(obj))，但会丢失函数、undefined、Date、RegExp、循环引用等 -
Lodash cloneDeep：最稳妥，支持全类型，配合按需引入（
import { cloneDeep } from 'lodash-es'）无体积负担 - structuredClone（现代浏览器）：原生 API，支持 Map/Set/Date 等，但暂不支持函数和循环引用，兼容性需检查
- 若需拷贝后仍响应式：将深拷贝结果传给
ref()或reactive()，例如const editForm = reactive(cloneDeep(props.formData))
替代深拷贝的更优实践
深拷贝是兜底方案，理想情况下应从架构层面减少依赖：
- 用 计算属性 + setter 封装派生状态，避免直接操作 props 数据
- 子组件只接收原子字段（如
title、items），而非整个业务对象，降低耦合 - 采用 provide/inject 或 Pinia 管理跨层级共享状态，让组件更专注 UI 职责
- 对复杂表单，使用 v-model 双向绑定 + 自定义事件，把同步逻辑收口到父组件
不复杂但容易忽略：Props 是契约，不是容器；数据劫持是 Vue 的守护者，深拷贝是你的保险绳。用对时机，才能让组件既灵活又可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
