問題如標(biāo)題所說，Vue中使用v-for遍歷對(duì)象數(shù)組，當(dāng)給數(shù)組其中某個(gè)元素對(duì)象重新賦值之后，頁面組件列表沒有及時(shí)更新渲染，而是在頁面進(jìn)行了其他的渲染操作以后列表才更新出來新的數(shù)據(jù)，那同樣給對(duì)象內(nèi)的屬性值賦值也可能存在不渲染的情況，一并解決，尤其發(fā)生在網(wǎng)絡(luò)請(qǐng)求成功后的線程中操作數(shù)據(jù)
1、先說原理和問題原因：
Vue 的數(shù)據(jù)響應(yīng)式系統(tǒng)可以監(jiān)測(cè)到數(shù)組的變化，但是它不能檢測(cè)到數(shù)組某個(gè)索引位置的元素直接賦值的變化，這就導(dǎo)致你通過直接修改數(shù)組的第一項(xiàng)元素，而沒有觸發(fā)組件的重新渲染。同樣給對(duì)象內(nèi)的屬性值賦值也可能存在不渲染的情況，一并解決
2、再說解決方法：
為了解決這個(gè)問題，你可以使用 Vue 提供的 $set 方法或者 Vue.set 方法來改變數(shù)組的某個(gè)索引位置的元素。
例如，假設(shè)你的數(shù)組是 list，你要修改數(shù)組的第一項(xiàng)元素，你可以使用以下代碼：
this.$set(this.list, 0, newValue);
或者
Vue.set(this.list, 0, newValue);
其中，第一個(gè)參數(shù)是要修改的數(shù)組，第二個(gè)參數(shù)是要修改的索引位置，第三個(gè)參數(shù)是要設(shè)置的新的值。
同樣給對(duì)象內(nèi)的屬性值賦值也可能存在不渲染的情況，也用這個(gè)方法：
this.$set(this.currentRow, 'fileUrl', res.data.fileUrl);
在這個(gè)例子中，currentRow 是一個(gè)對(duì)象，我們使用 $set 方法將其 fileUrl 屬性更新為上傳成功后的 URL。這樣，即使 Vue 無法檢測(cè)到屬性的變化，也能夠觸發(fā)響應(yīng)式更新，重新渲染界面。
這樣，當(dāng)你使用 $set 或 Vue.set 方法來改變數(shù)組的某個(gè)索引位置的元素時(shí)，Vue 就能夠檢測(cè)到數(shù)組的變化，從而觸發(fā)組件的重新渲染。
額外方案：
使用 $forceUpdate 方法強(qiáng)制更新組件：
如果你的更新操作比較復(fù)雜，或者使用了計(jì)算屬性等高級(jí)特性，可能會(huì)導(dǎo)致 Vue 無法正確地檢測(cè)到數(shù)據(jù)變化，從而無法自動(dòng)重新渲染界面。這時(shí)候可以使用 $forceUpdate 方法強(qiáng)制更新組件，例如：文章來源：http://www.zghlxwxcb.cn/news/detail-461740.html
this.$forceUpdate();
在這個(gè)例子中，我們使用 $forceUpdate 方法強(qiáng)制更新組件，這樣就能確保界面上的數(shù)據(jù)和組件實(shí)例的數(shù)據(jù)保持一致。文章來源地址http://www.zghlxwxcb.cn/news/detail-461740.html
到了這里，關(guān)于已解決：Vue改變數(shù)據(jù)后界面不自動(dòng)渲染，Vue中使用v-for遍歷對(duì)象數(shù)組，當(dāng)給其中某個(gè)元素對(duì)象重新賦值之后，頁面組件列表沒有渲染更新。的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
![FE_Vue學(xué)習(xí)筆記 條件渲染[v-show v-if] & 列表渲染[v-for] 列表過濾 列表排序](https://imgs.yssmx.com/Uploads/2024/02/446581-1.png)
