vue中，同步执行的问题

Question

vue中，有以下代码，其中，arr是放在vuex中，

arr={"costPrice":"","jdPrice":"","sellerSkuId":"","skuId":null,"skuName":"Dyy-test-451331  ","stock":"","netWeight":"","packHeight":"","packLong":"","packWide":"","piece":0,"textAttrValueAlias":"BLACK","textAttrValueId":2258240,"upc":"","stockVOs":[{"dcId":"","dcName":"","storeId":"","storeName":""},{"dcId":"","dcName":"","storeId":"","storeName":""},{"dcId":"","dcName":"","storeId":"","storeName":""},{"dcId":"","dcName":"","storeId":"","storeName":""},{"dcId":"","dcName":"","storeId":"","storeName":""}],"textShowFlag":true}

然后，更改arr

console.log(arr)
console.log(JSON.stringify(arr))
console.log(arr.textShowFlag)
Vue.set(this.skuListGroupVOs[rowNumber].childList[columnNumber], 'textShowFlag', !arr.textShowFlag)

为什么会出现JSON.stringify前后不一致的问题？

Answer 1

浏览器 为了 性能，在console.log时候 仅仅只会保存对象的引用,所以console.log输出的并不是当前的值
很可能是异步之后的 对象值
而 JSON.stringify 把 这个变为了字符串，不存在 字符串改变的情况，仅此而已

Answer 2

textShowFlag原本本就是false
打印的时候arr中的textShowFlag也是false，但是后面你执行了取反操作，arr中的textShowFlag变成了true
注意，此时你再看是true，因为打印的是引用，点开之后是是取反后的最终值
你可以debugger看一下，此时arr点开的textShowFlag是false。

console.log(arr)
console.log(JSON.stringify(arr))
console.log(arr.textShowFlag)
debugger
Vue.set(this.skuListGroupVOs[rowNumber].childList[columnNumber], 'textShowFlag', !arr.textShowFlag)