简单函数出现极端异常：修改activeViewElement时funcList意外同步更新

问题根本原因 #

这是JavaScript引用类型的特性导致的，你操作的两个变量实际指向了内存中的同一个对象。
你应该是在其他代码中初始化activeViewElement时，直接进行了类似this.activeViewElement = this.funcList[this.clickedObject]的赋值操作：

• funcList中存储的元素是对象类型，JS中对象的直接赋值只会传递内存地址引用，不会自动生成独立的对象副本
• 也就是说this.activeViewElement.costResources和this.funcList[this.clickedObject].costResources本质是同一个对象，修改任意一侧的属性都会同步影响另一个

修复方案 #

在初始化activeViewElement时对目标对象做拷贝，切断两者的引用关联即可：
如果你的对象只有两级嵌套（costResources下都是数字等基础类型值），用浅拷贝就能解决：

// 初始化赋值的时候做拷贝，不要直接赋值引用
const target = this.funcList[this.clickedObject]
this.activeViewElement = {
  ...target,
  // 单独拷贝costResources对象，避免共享引用
  costResources: {...target.costResources}
}

如果对象嵌套层级更深，直接用深拷贝方案即可：

// 方案1：用JSON序列化反序列化处理（适合没有函数、Symbol等特殊类型的对象）
this.activeViewElement = JSON.parse(JSON.stringify(this.funcList[this.clickedObject]))

// 方案2：用项目中已有的深拷贝工具，比如lodash的cloneDeep
this.activeViewElement = _.cloneDeep(this.funcList[this.clickedObject])

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