別再用this.$forceUpdate()了！—性能優化篇

起因是接手公司之前外包的項目做項目優化，代碼看著一言難盡，然后看代碼時，發現了這個api:this.$forceUpdate()，這是什么？

🎈介紹

這里官網介紹很簡單，

vm.$forceUpdate()
示例：
迫使 Vue 實例重新渲染。注意它僅僅影響實例本身和插入插槽內容的子組件，而不是所有子組件。

還有一段介紹，但是是用于強制更新這一方法的

如果你發現你自己需要在 Vue 中做一次強制更新，99.9% 的情況，是你在某個地方做錯了事。

你可能還沒有留意到數組或對象的變更檢測注意事項，或者你可能依賴了一個未被 Vue 的響應式系統追蹤的狀態。

然而，如果你已經做到了上述的事項仍然發現在極少數的情況下需要手動強制更新，那么你可以通過 $forceUpdate來做這件事。

就是說這個方法是用來強制更新的！但是官網說你很可能是你的問題，你哪個地方做錯了！

🧨弊端

$forceUpdate()會迫使 Vue 實例重新渲染，所以就會有一個問題，那就是重新渲染dom，造成性能壓力，而且繞過了vue的正常響應式系統，就拋棄了響應式了，那就有點因噎廢食了。

注意事項

$forceUpdate()會觸發beforeUpdate和updated生命周期

$forceUpdate()只會影響實例本身和插入插槽內容的子組件

🎆解決實例

項目原先代碼中，先進行遍歷catchs數組中，修改每個對象中的active屬性，隨后進行更改為false，然后再傳參進來的值對應的active值修改為true，原來的兄弟可能看，數據變了怎么不更新啊，沒有排查出問題，直接全部重新渲染，真是簡單痛快呀。

thisCatch(index) {this.catchs.forEach((element,index) => {element.active = false})this.catchs[index].active = truethis.$forceUpdate()},

那就輪到我優化了，首先發現一個點是catchs數組中對象對應的值沒有active這個屬性，而vue2中響應式就有一個缺陷就是新增屬性沒有響應式。

所以到這就是兩個方法，給默認值或者添加值讓它有響應式

默認值好理解，實現響應式其實也挺簡單就是使用$set

thisCatch(index) {this.catchs.forEach((element,index) => {this.$set(this.days[index], 'active', false);})this.$set(this.days[index], 'active', true);},

很簡單就解決了問題，所以其實就正如官網說的😂

如果你發現你自己需要在 Vue 中做一次強制更新，99.9% 的情況，是你在某個地方做錯了事。