Vue监听drivers的watcher为何修改standingsData时也会触发

问题根源 #

• 数组属于引用类型，你在test方法中直接执行this.standingsData = this.drivers时，两个变量会指向同一个内存地址，修改任意一个变量的内容都会同步影响另一个
• 你给drivers的监听器开启了deep: true深度监听规则，只要drivers内部元素/属性发生变化就会触发监听回调，修改standingsData等价于修改drivers，会触发回调执行test方法把standingsData的值重新覆盖，导致你的排序操作失效

修复方案 #

把test方法中的直接赋值改为浅拷贝/深拷贝，切断两个变量的引用关联即可：

• 如果drivers数组的元素都是基础类型，用浅拷贝即可：

test(){
  console.log("chamou o teste")
  // 扩展运算符实现浅拷贝
  this.standingsData = [...this.drivers]
  // 也可以用slice实现：this.standingsData = this.drivers.slice()
}

• 如果drivers数组的元素是嵌套的对象/数组等引用类型，需要用深拷贝：

test(){
  console.log("chamou o teste")
  // 无函数、Symbol、循环引用的场景可以用JSON序列化方案
  this.standingsData = JSON.parse(JSON.stringify(this.drivers))
  // 复杂场景可以使用项目内置的深拷贝工具方法，或者自行实现深拷贝逻辑
}

内容的提问来源于stack exchange，提问作者Kos-Mos