Vue 3中如何使用Vue.util.extend实现组件prop的无引用数据拷贝

核心结论 #

• Vue.util.extend 在 Vue 3 中已被完全私有化，不再对外暴露，不存在任何合法的导入方式可以让这个方法正常运行
• 这个工具本身是 Vue 2 时代的内部实现，从来不属于官方公开的稳定API，官方本身就不推荐业务代码直接调用这类绑定内部实现的工具方法

原写法在 Vue 3 失效的原因 #

Vue 3 对核心模块的API暴露做了严格的边界划分：

• 所有挂在Vue.util下的工具函数都被纳入内部作用域，不再挂载在导出的Vue全局对象上
• 既没有从vue包的入口导出对应的独立方法，也没有保留在Vue构造器的属性上，不管编写什么样的import语句，都无法从项目依赖里获取到这个方法

等效替代实现 #

Vue.util.extend的原生实现逻辑和浏览器内置的Object.assign完全一致，本质就是做一层浅拷贝，把源对象的可枚举属性合并到目标对象上，可以直接把原来的调用替换成原生API：

// 完全对等替换Vue.util.extend的写法
localPropData: Object.assign({}, this.propData)

这种写法的运行效果和 Vue 2 里的Vue.util.extend({}, this.propData)没有任何区别，性能表现也更优。

不同拷贝需求的选型说明 #

• 如果只需要断开prop的第一层引用，避免直接修改第一层属性触发Vue单向数据流的prop变更警告，用上面的Object.assign浅拷贝就完全够用
• 如果需要在多层嵌套结构下完全断开所有层级的引用，需要注意你当前临时使用的JSON.parse(JSON.stringify(this.propData))方案存在适用边界：遇到带函数、Symbol、循环引用的prop数据时，会出现序列化失败、数据丢失的问题
• 附带提一句你示例代码里的笔误：data()方法里的返回值写法有误，当前写的return() {}是把空函数当成了返回值，应该改成return { ... }的结构，才能正常定义本地响应式数据

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