最近在寫一個(gè)功能，使用v-for循環(huán)渲染子組件：代碼如下：

當(dāng)datas的數(shù)據(jù)發(fā)生改變時(shí)，按理子組件展現(xiàn)的數(shù)據(jù)也應(yīng)該重新渲染，不過在使用的時(shí)候并沒有達(dá)到這樣的效果，但是將循環(huán)渲染的子組件改成html標(biāo)簽的話數(shù)據(jù)是會(huì)重新渲染的，經(jīng)查閱發(fā)現(xiàn)當(dāng) Vue 正在更新使用?v-for?渲染的元素列表時(shí)，它默認(rèn)使用“就地更新”的策略。如果數(shù)據(jù)項(xiàng)的順序被改變，Vue 將不會(huì)移動(dòng) DOM 元素來匹配數(shù)據(jù)項(xiàng)的順序，而是就地更新每個(gè)元素，并且確保它們?cè)诿總€(gè)索引位置正確渲染，這個(gè)默認(rèn)的模式是高效的，但是只適用于不依賴子組件狀態(tài)或臨時(shí) DOM 狀態(tài) (例如：表單輸入值) 的列表渲染輸出。相關(guān)文獻(xiàn)：https://cn.vuejs.org/v2/guide/list.html#%E7%BB%B4%E6%8A%A4%E7%8A%B6%E6%80%81

知道原因后在v-for的同時(shí)加上:key屬性就解決了此問題。

?

?

總結(jié)

以上是生活随笔為你收集整理的vue循环渲染子组件视图不更新问题的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。