vue中的$forceUpdate()

$forceUpdate()

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

結合vue的生命周期，調用$forceUpdate后只會觸發beforeUpdate和updated這兩個鈎子函數，不會觸發其他的鈎子函數。

它僅僅影響實例本身和插入插槽內容的子組件，而不是所有子組件。

 

$forceUpdate()使用場景：

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

html:

<span class="test">{{egData.value}}</span>
<el-button @click="changeData">改變</el-button>

js:
egData: {}

...

changeData () {
    this.egData.value = 'oldValue'
    this.$forceUpdate()  // dom會更新
}

但是這種做法並不推薦，官方說如果你現在的場景需要用forceUpdate方法 ,那么99%是你的操作有問題，如上data里不顯示聲明對象的屬性，之后添加屬性時正確的做法時用 vm.$set() 方法，所以forceUpdate請慎用。

 

 

this.$forceUpdate(); 強制刷新

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