Vue3響應(yīng)式對象數(shù)組不能實時DOM更新問題解決辦法

更新時間：2024年07月11日 09:02:43 作者：阿姨給我倒一杯卡布奇諾

在寫大文件上傳時,碰到關(guān)于 vue2 跟 vue3 對在循環(huán)中使用異步,并動態(tài)把普通對象添加進響應(yīng)式數(shù)據(jù),在異步前后修改該普通對象的某個屬性,導(dǎo)致 vue2 跟 vue3 的視圖更新不一致,引發(fā)一系列的思考,所以本文介紹了Vue3響應(yīng)式對象數(shù)組不能實時DOM更新問題解決辦法

前言

之所以寫該文章是在自己寫大文件上傳時，碰到關(guān)于 vue2 跟 vue3 對在循環(huán)中使用異步，并動態(tài)把普通對象添加進響應(yīng)式數(shù)據(jù)，在異步前后修改該普通對象的某個屬性，導(dǎo)致 vue2 跟 vue3 的視圖更新不一致，引發(fā)一系列的思考。

forEach 中使用異步

forEach() 期望的是一個同步函數(shù)，它不會等待 Promise 兌現(xiàn)。在使用 Promise（或異步函數(shù)）作為 forEach 回調(diào)時，請確保你意識到這一點可能帶來的影響。

以上解釋是 MDN 關(guān)于對 forEach 的部分解釋，這里要注意的是，在 forEach 中使用異步是不會等待異步而暫停。所以如果不了解的小伙伴要注意一下，那就讓我們做個測試。

我們先定義一個異步回調(diào)函數(shù)：

// 延時回調(diào)函數(shù)
const asyncFunc = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log('執(zhí)行延遲：', new Date())
      resolve()
    }, 1000)
  })
}

再定義一個關(guān)于 forEach 的函數(shù)并執(zhí)行

const forEachFunc = () => {
  let arr = new Array(5).fill({ test: 'test' })
  arr.forEach(async (item, i) => {
    console.log(`異步前${i}：`,new Date())
    await asyncFunc()
   console.log(`異步后${i}：`,new Date())
  })
  console.log('forEach外部：',new Date())
}
forEachFunc()

讓我們看看最終的打印結(jié)果

根據(jù)輸出結(jié)果可以看到：有五次循環(huán)，但五次循環(huán)基本是按順序同步執(zhí)行，在每次循環(huán)遇到異步后，并不會阻塞 forEach 外部代碼執(zhí)行，而是把每次循環(huán)單獨處理異步，在內(nèi)部等待異步完成后處理邏輯。

for 中使用異步

而 for 循環(huán)是會阻塞下一個循環(huán)并等待本次異步完后再處理下一個循環(huán)，等待全部循環(huán)完后再執(zhí)行 for 循環(huán)下面的代碼。

那讓我們再驗證以上的 for 循環(huán)異步理論是否正確：

const forFunc = async () => {
  let arr = new Array(5).fill({ test: 'test' })
  for (let i = 0; i < arr.length; i++) {
    console.log(`異步前${i}：`, new Date())
    await asyncFunc()
    console.log(`異步后${i}：`, new Date())
  }
  console.log('for外部：', new Date())
}
forFunc()

根據(jù)控制臺輸出可以看到，通過打印的 i 跟時間可以判斷：先執(zhí)行完當前循環(huán)的異步后再執(zhí)行一下循環(huán)，且等所有循環(huán)處理完再執(zhí)行 for 循環(huán)外部的代碼

需求

因為在大文件上傳中涉及到文件上傳狀態(tài)的更變，現(xiàn)在需求是：需要在循環(huán)中把一個普通對象 push 到響應(yīng)式數(shù)組中，并修改該對象的 state 屬性，在等待一個異步回調(diào)后，再去修改 state 值，并要在頁面視圖中展現(xiàn)改變。

vue2 代碼實現(xiàn)

在模板代碼中，直接在視圖展示全部數(shù)組，并用 v-for 遍歷

<template>
  <div>
    數(shù)組數(shù)據(jù)：
    <div>
      {{ testArr }}
    </div>
    <div style="margin-top: 50px">
      <div v-for="item in testArr" :key="item.id">
        {{ item.state }}
      </div>
    </div>
  </div>
</template>

在script 中，定義響應(yīng)式數(shù)組，以及一個異步回調(diào)函數(shù)，并分別定義用 for 循環(huán)跟 forEach 處理異步修改狀態(tài)的方法，并在 mounted 生命周期里分別執(zhí)行這兩個方法

<script>
export default {
  data() {
    return {
      testArr: [],
    }
  },
  mounted() {
    this.forFunc()
    // this.forEachFunc()
  },
  methods: {
    asyncFunc() {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          console.log('執(zhí)行延遲：', new Date())
          resolve('延遲成功')
        }, 1000)
      })
    },
    // for循環(huán)
    async forFunc() {
      let arr = new Array(5).fill({ test: 'test' })

      for (let i = 0; i < arr.length; i++) {
        let obj = {
          id: i,
          state: 'state' + i,
        }
        this.testArr.push(obj)
        obj.state = 'before前的name'
        await this.asyncFunc()
        obj.state = 'after后的name'
      }
      console.log(this.testArr, 'this.testArr')
    },
    // forEach循環(huán)
    forEachFunc() {
      let arr = new Array(5).fill({ test: 'test' })
      arr.forEach(async (item, i) => {
        let obj = {
          id: i,
          state: 'state' + i,
        }
        this.testArr.push(obj)
        obj.state = 'before前的name'
        await this.asyncFunc()
        obj.state = 'after的name'
      })
      console.log(this.testArr, 'this.testArr')
    },
  },
}
</script>

1. forEach 循環(huán)效果

可以看到刷新頁面后，在一秒延遲后數(shù)組內(nèi)所有對象的 state 屬性同步變化

2. for 循環(huán)效果展示

可以看到在 Vue2 中 DOM 視圖是正常更新，且用 for 循環(huán)是先執(zhí)行完當前循環(huán)的異步后再執(zhí)行一下循環(huán)，且等所有循環(huán)處理完再執(zhí)行 for 循環(huán)外部的代碼

3. 小結(jié)

在 vue2 中在循環(huán)中使用異步，并動態(tài)把普通對象添加進響應(yīng)式數(shù)組，在異步前后修改該普通對象的某個屬性，修改的是該數(shù)組具體對象某一屬性，且視圖能正常更新。

vue3 代碼實現(xiàn)

模板代碼中，直接在視圖展示全部數(shù)組，并用 v-for 遍歷

<template>
  <div>
    數(shù)組數(shù)據(jù)：
    <div>
      {{ testArr }}
    </div>
    <div style="margin-top: 50px">
      <div v-for="item in testArr" :key="item.id">
        {{ item.state }}
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue'
const testArr = ref([])
  // 延時回調(diào)
const asyncFunc = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log('執(zhí)行延遲：', new Date())
      resolve()
    }, 1000)
  })
}

  // for-正常push進去后直接修改obj
const forFunc = async () => {
  let arr = new Array(5).fill({ test: 'test' })

  for (let i = 0; i < arr.length; i++) {
    let obj = {
      id: i,
      state: 'state' + i,
    }
    testArr.value.push(obj)
    obj.state = 'before前的name'
    await asyncFunc()
    obj.state = 'after的name'
  }
  console.log(testArr.value, 'testArr.value')
}

  // forEach-正常push進去后直接修改obj
const forEachFunc = () => {
  let arr = new Array(5).fill({ test: 'test' })
  arr.forEach(async (item, i) => {
    let obj = {
      id: i,
      state: 'state' + i,
    }
    testArr.value.push(obj)
    obj.state = 'before前的name'
    await asyncFunc()
    obj.state = 'after的name'
  })
  console.log(testArr.value, 'testArr.value')
}

  onMounted(() => {
  // forFunc()
  forEachFunc()

})

</script>

1. forEach 循環(huán)效果

！可以看到，在異步后面的 state 修改并沒有生效，但是為什么在控制臺console.log的值卻又改變了？

關(guān)于console.log

這里為什么要說 console.log 呢，可能很多人沒注意在控制臺用 console 打印對象時，是會隨著值變化也不斷更新的。所以你在最后中看到的值并不是當時打印的值，要注意！

以下是 MDN 的部分解釋

所以這就是解釋了以上現(xiàn)象，為什么最終在打印的數(shù)組，是改變后的。但為什么視圖沒有更新呢？讓我們再使用 for 循環(huán)+ await 測試看看會發(fā)生什么

2. for 循環(huán)效果

onMounted(() => {
  // forFunc()
  forEachFunc()
})

在頁面中可以看到，for 循環(huán)是按順序異步更新的，但是最后一個 item 在視圖并沒有更新，控制臺打印的最終值確實更新了的

那到底是什么原因呢？初步判斷：vue3 的響應(yīng)式監(jiān)聽的是代理對象，因為在循環(huán)中使用異步，對普通對象的修改可能不能及時監(jiān)聽到，而 vue2 生效的原因是在于它本身就是在原對象的 get set 上操作的。

至于為什么 for 循環(huán)+異步會生效，而最后一個未更新，因為在每個 item 循環(huán)中，push 觸發(fā)了數(shù)組改變，從而導(dǎo)致視圖更新，但在最后循環(huán)中，在 await 后面并沒有更改數(shù)組。

那就讓我們多做幾個實驗測試一下

3. 用reactive創(chuàng)建對象

// for-用reactive創(chuàng)建對象
const forFunc2 = async () => {
  let arr = new Array(5).fill({ test: 'test' })

  for (let i = 0; i < arr.length; i++) {
    let obj = reactive({
      id: i,
      state: 'state' + i,
    })
    testArr.value.push(obj)
    obj.state = 'before前的name'
    await asyncFunc()
    obj.state = 'after的name'
  }
  console.log(testArr.value, 'testArr.value')
}

// forEach-用reactive創(chuàng)建對象
const forEachFunc2 = () => {
  let arr = new Array(5).fill({ test: 'test' })
  arr.forEach(async (item, i) => {
    let obj = reactive({
      id: i,
      state: 'state' + i,
    })
    testArr.value.push(obj)
    obj.state = 'before前的name'
    await asyncFunc()
    obj.state = 'after的name'
  })
  console.log(testArr.value, 'testArr.value')
}

那讓我們來分別看一下這兩個函數(shù)執(zhí)行的效果

for 循環(huán)：

可以看到用 reactive 創(chuàng)建的代理對象會被Vue跟蹤到，且視圖進行了實時更新

forEach 循環(huán)：

最終結(jié)果也是能正常更新

4. 直接取數(shù)組下標對象修改

直接通過 testArr.value[i].state = 'after的name'去修改。

// for-直接取數(shù)組下標對象修改
const forFunc3 = async () => {
  let arr = new Array(5).fill({ test: 'test' })

  for (let i = 0; i < arr.length; i++) {
    let obj = reactive({
      id: i,
      state: 'state' + i,
    })
    testArr.value.push(obj)
    testArr.value[i].state = 'before前的name'
    await asyncFunc()
    testArr.value[i].state = 'after的name'
  }
  console.log(testArr.value, 'testArr.value')
}

// forEach-直接取數(shù)組下標對象修改
const forEachFunc3 = () => {
  let arr = new Array(5).fill({ test: 'test' })
  arr.forEach(async (item, i) => {
    let obj = {
      id: i,
      state: 'state' + i,
    }
    testArr.value.push(obj)
    testArr.value[i].state = 'before前的name'
    await asyncFunc()
    testArr.value[i].state = 'after的name'
  })
  console.log(testArr.value, 'testArr.value')
}

for 循環(huán)：

forEach 循環(huán)：

通過取數(shù)組下標對象修改是能實時更新的，因為相當于直接修改響應(yīng)式對象的某一個值，這樣Vue3也能正常監(jiān)聽到并視圖更新

5. 重新賦值對象引用地址

通過 obj = testArr.value[i]方式去修改。

// for-重新賦值對象引用
const forFunc4 = async () => {
  let arr = new Array(5).fill({ test: 'test' })

  for (let i = 0; i < arr.length; i++) {
    let obj = reactive({
      id: i,
      state: 'state' + i,
    })
    testArr.value.push(obj)
    obj = testArr.value[i]
    obj.state = 'before前的name'
    await asyncFunc()
    obj.state = 'after的name'
  }
  console.log(testArr.value, 'testArr.value')
}

// forEach-重新賦值對象引用
const forEachFunc4 = () => {
  let arr = new Array(5).fill({ test: 'test' })
  arr.forEach(async (item, i) => {
    let obj = {
      id: i,
      state: 'state' + i,
    }
    testArr.value.push(obj)
    obj = testArr.value[i]
    obj.state = 'before前的name'
    await asyncFunc()
    obj.state = 'after的name'
  })
  console.log(testArr.value, 'testArr.value')
}

for 循環(huán)：