? vue中$forceUpdate()

1、認識

強制該組件重新渲染
鑒于 Vue 的全自動響應性系統，這個功能應該很少會被用到

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

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

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

2、使用

Vue2 中針對對象與數組的一些特殊操作會導致視圖沒有更新。檢測變化的注意事項 — Vue2.js
這時可以使用：

當在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()

1、$forceUpdate()

2、$set()

3、$nextTick()