當某個data數(shù)據(jù)是動態(tài)設置的档押,比如:
data() {
return {
parts: [],
}
從網(wǎng)絡獲取數(shù)據(jù)并賦值:
const res = await getInquiry()
this.parts = res
而此時this.parts數(shù)組里包含的對象很復雜,當你改變this.parts數(shù)組里某個對象的元素時,對應的數(shù)據(jù)確實變了汇荐,但是界面沒有變化洞就,那么可以用this.$forceUpdate()強制刷新
chose(o, p) {
let i = p.indexId.indexOf(o.id)
if (p.indexId && i >= 0) {
p.indexId = []
} else {
p.indexId = [o.id]
}
this.$forceUpdate()
// this.parts.splice(index, 1, item)
},
或者刷新this.parts數(shù)據(jù)也可以(this.parts.splice(index, 1, item)),但是如果this.parts數(shù)據(jù)太復雜容易出錯
總結強制刷新的辦法
1.刷新數(shù)據(jù)源(刷新this.data 從而使 v-if 和key 所在DOM刷新)
2.數(shù)據(jù)源太復雜用 this.$forceUpdate()
使用場景匯總:
forceUpdate 適用于那些無法被 vue 監(jiān)聽到了 data 屬性操作掀淘,比如對對象旬蟋、數(shù)組的修改;或者你可能依賴了一個未被 Vue 的響應式系統(tǒng)追蹤的狀態(tài)革娄,比如 某個 data 屬性被 Object.freeze() 凍結了等等情況柄驻。
v-if 和key方法適用于$forceUpdate 無法滿足的強制刷新涡上,需要觸發(fā)完整的生命周期鉤子癌幕。
開銷:
key同 v-if 一樣员寇,開銷遠遠大于 $forceUpdate