vue 數據不能及時更新的

雙向綁定後的數據沒有刷新到view上

let tempArr = [];
        tempArr.push({id: 1, name: 'apple'});
        tempArr.push({id: 1, name: 'banana'});
        tempArr.push({id: 1, name: 'orange'});
        this.arr = tempArr;
        setTimeout(() => {
          // this.arr[0].color = 'white';
          for (let fruit of tempArr) {
            fruit.color = 'white';
          }
          console.log("result:", this.arr)
        }, 3000);

view頁面的結果

console結果

解決方案

let tempArr = [];
        tempArr.push({id: 1, name: 'apple'});
        tempArr.push({id: 1, name: 'banana'});
        tempArr.push({id: 1, name: 'orange'});
        // 在設置雙向綁定以前，就已經有了color這個屬性
        for (let fruit of tempArr) {
          fruit.color = 'aa';
        }
        this.arr = tempArr;
        console.log("result--start:", this.arr)
        setTimeout(() => {
          // this.arr[0].color = 'white';
          for (let fruit of this.arr) {
            fruit.color = 'white';
          }
          console.log("result:", this.arr)
        }, 3000);

結果

頁面輸出結果

在雙向綁定以前就已經有了color屬性

console輸出改變後的結果

參考過的網站地址：

https://www.cnblogs.com/zhuzhenwei918/p/6893496.html