Object.assign()
Object.assign() 是 JavaScript 的一个内置方法,用于将一个或多个源对象的所有可枚举属性复制到目标对象。在 Vue 的响应式系统中,它特别有用。
语法:
Object.assign(目标对象, 源对象1, 源对象2, ...)
1. 保持响应式:
- 直接赋值 `formData = result.data` 会破坏 Vue 的响应式系统
- 使用 `Object.assign` 可以保留 `formData` 的响应式特性
2. 工作原理:
- 将 `result.data` 的所有属性复制到 `formData` 对象
- 只覆盖已存在的属性(如 `account` 和 `avatar`)
- 保持 `formData` 的引用不变
3. 与响应式系统的关系:
- Vue 3 的 `reactive()` 创建的响应式对象
- 直接替换整个对象会破坏响应式跟踪
- `Object.assign` 只修改属性值,不改变对象引用
4. 适用场景:
- 表单数据更新
- 需要合并对象但保持响应式时
- 避免重新创建响应式对象
在您的代码中,这确保了表单数据更新后仍能触发 Vue 的响应式更新机制。