在從后臺(tái)獲取復(fù)雜數(shù)據(jù)類型時(shí),有時(shí)我們會(huì)有從本地添加屬性的需求。 如圖, `item.hover` 是動(dòng)態(tài)添加到 `changeUserList` 數(shù)組中的屬性,后臺(tái)的對(duì)象數(shù)組中沒有 `hover` 這個(gè)鍵,Vue 默認(rèn)情況下并不會(huì)對(duì)動(dòng)態(tài)添加的屬性進(jìn)行響應(yīng)式處理。
這種寫法就會(huì)導(dǎo)致在控制臺(tái)可以正常打印,但在HTML結(jié)構(gòu)中卻不會(huì)進(jìn)行一些響應(yīng)式的變化。
這種情況通常發(fā)生在動(dòng)態(tài)添加屬性或者鍵到對(duì)象上時(shí),因?yàn)?Vue 默認(rèn)只會(huì)對(duì)初始化時(shí)就存在的屬性進(jìn)行響應(yīng)式處理。
為了讓 Vue 能夠?qū)?dòng)態(tài)添加的屬性進(jìn)行響應(yīng)式處理,可以使用 `Vue.set` 或 `this.$set` 方法將具體屬性添加到數(shù)組的每個(gè)對(duì)象中。示例如下:
除此之外還有一個(gè)解決方法是使用 `$forceUpdate()` 強(qiáng)制更新視圖。這個(gè)方法會(huì)重新渲染整個(gè)組件,但不推薦頻繁使用,因?yàn)樗赡軙?huì)影響性能。