? vue中$forceUpdate()

1、認(rèn)識(shí)

強(qiáng)制該組件重新渲染
鑒于 Vue 的全自動(dòng)響應(yīng)性系統(tǒng)，這個(gè)功能應(yīng)該很少會(huì)被用到

$forceUpdate()迫使vue實(shí)例重新（rander）渲染虛擬DOM，注意并不是重新加載組件。

結(jié)合vue的生命周期，調(diào)用$forceUpdate后只會(huì)觸發(fā)beforeUpdate和updated這兩個(gè)鉤子函數(shù)，不會(huì)觸發(fā)其他的鉤子函數(shù)。

它僅僅影響實(shí)例本身和插入插槽內(nèi)容的子組件，而不是所有子組件

2、使用

Vue2 中針對對象與數(shù)組的一些特殊操作會(huì)導(dǎo)致視圖沒有更新。檢測變化的注意事項(xiàng) — Vue2.js
這時(shí)可以使用：

當(dāng)在data里沒有顯示的聲明一個(gè)對象的屬性，而是之后給該對象添加屬性，這種情況vue是檢測不到數(shù)據(jù)變化的，可以使用$forceUpdate()

html:<span class="test">{{egData.value}}</span>
<el-button @click="changeData">改變</el-button>js:
egData: {}...changeData () {this.egData.value = 'oldValue'this.$forceUpdate()  // dom會(huì)更新
}

注意：

這種做法并不推薦，官方說如果你現(xiàn)在的場景需要用forceUpdate方法 ,那么99%是你的操作有問題，如上data里不顯示聲明對象的屬性

后添加屬性時(shí)正確的做法時(shí)用 vm.$set() 方法，所以forceUpdate請慎用。

this.$forceUpdate(); 強(qiáng)制刷新

同等效果的：window.location.reload()

1、$forceUpdate()

2、$set()

3、$nextTick()