Vue2数组对象属性值前后不一致问题排查

根因（90%概率命中） #

你踩的是浏览器console.log打印引用类型的惰性求值坑，和Vue响应式、组件更新逻辑无关，this.$forceUpdate()对这个问题完全无效。
当你在代码里写console.log(某个对象)时，控制台不会立刻把这行代码执行瞬间的对象属性序列化存为快照，只会保存这个对象的内存引用。你事后在控制台展开这个打印结果查看属性时，浏览器读取的是你展开那一刻对象的最新属性值，不是代码执行到log那一行的瞬时值。你看到的966行打印值和972行打印值对不上，大概率是966行你打印的是整个对象，看到的属性值是后续代码修改后的结果，不是966行执行时的真实值。

其他可能诱因 #

• 循环内对象引用复用：如果存储规则的对象是声明在循环外部的，循环过程中反复修改同一个对象的属性再存入数组，所有数组项都会指向同一块内存，后续迭代的属性修改会覆盖之前的值，自然会出现同对象属性前后不一致的情况。
• 隐式属性修改：966到972行之间调用的工具函数、触发的组件v-model同步、隐式执行的计算属性/侦听器，可能在你没注意到的分支里修改了attribute_id的值。
• 异步逻辑插队：如果两行代码之间存在$nextTick、微任务、接口回调这类异步逻辑，可能在同步代码执行间隙修改了对象属性。

排查步骤 #

1. 先排除日志惰性求值干扰：不要直接打印整个对象，改为打印属性的瞬时原始值，966行和972行都用console.log('行号xxx attribute_id瞬时值：', obj.attribute_id)，如果要打整个对象的快照，用console.log(JSON.parse(JSON.stringify(obj)))做深拷贝后再打印，这时候看到的值才是log执行瞬间的真实值。如果这时候两行打印值符合代码执行逻辑，说明不存在所谓的取值异常，只是之前的日志显示误导了你。
2. 检查循环内对象声明：确认每次循环迭代操作的规则对象都是在循环体内部新建的，不要复用循环外声明的对象引用。
3. 加属性写入断点定位修改点：打开浏览器开发者工具Sources面板，找到你操作的目标对象，给attribute_id属性加写入断点，只要有代码修改这个属性，调试器会直接断在修改代码的位置，不需要逐行猜逻辑。
4. 排查响应式赋值问题：如果是对象新增attribute_id属性，确认是用this.$set(obj, 'attribute_id', 值)的方式赋值，避免Vue2无法侦测到属性变化导致的取值和视图不同步问题。

内容的提问来源于stack exchange，提问作者code-8