手動(dòng)刷新組件是在Vue中經(jīng)常所遇到的需求之一，因?yàn)椴⒉皇撬械臄?shù)據(jù)存儲(chǔ)都是響應(yīng)式的，所以需要手動(dòng)刷新組件才能呈現(xiàn)最新的數(shù)據(jù)。而在Vue的開發(fā)中，我會(huì)選擇使用兩種方法實(shí)現(xiàn)手動(dòng)刷新組件，分別是使用vm.$forceUpdate()和使用key來(lái)強(qiáng)制重新渲染組件。

首先來(lái)看使用vm.$forceUpdate()手動(dòng)刷新組件的方法。該方法可以強(qiáng)制當(dāng)前實(shí)例重新渲染并且也是在當(dāng)前組件中最為簡(jiǎn)單的一種手動(dòng)刷新的方案。當(dāng)我使用vm. $ forceUpdate()之后，Vue將在下一個(gè)tick時(shí)刷新組件。因此，可將其使用在界面沒有大量處理邏輯需要更新的情況下。同時(shí)，它也會(huì)影響到性能，因?yàn)樗鼘⒏淖粉櫟姆秶鷱慕M件的虛擬DOM完全升級(jí)到了完整的DOM樹。

methods: {
updateComponent() {
this.$forceUpdate();
}
}

然后是使用key來(lái)強(qiáng)制重新渲染組件的方法，它是Vue在特殊情況下為我們提供的另一種手動(dòng)刷新組件的方式，這個(gè)方法就是利用key來(lái)重建虛擬DOM。重建的虛擬DOM總是會(huì)進(jìn)行重新渲染，甚至當(dāng)數(shù)據(jù)沒有改變時(shí)也是如此。

這里在DOM中給它綁定一個(gè)key，這意味著如果key更改，則vue強(qiáng)制重新渲染組件。每次使用updateComponent()函數(shù)更新需要重新渲染的數(shù)據(jù)時(shí)，它的someKey值都會(huì)增加1。這樣，Vue會(huì)重新構(gòu)建請(qǐng)求并重新渲染此組件，即使數(shù)據(jù)沒有改變。這個(gè)方法對(duì)性能影響較小，因?yàn)樗幚淼闹挥幸徊糠諨OM，但有時(shí)不是很方便。

總的來(lái)說(shuō)，手動(dòng)刷新組件在Vue的開發(fā)中是必不可少的，因?yàn)橛行?shù)據(jù)不是響應(yīng)式的，只有手動(dòng)刷新才能達(dá)到最新數(shù)據(jù)的呈現(xiàn)。而針對(duì)不同的情況，可以選擇不同的手動(dòng)刷新方法。如果只是界面的變化不大，推薦使用vm.$forceUpdate()方法，如果需要與其他組件聯(lián)動(dòng)使用，就可以考慮使用key來(lái)強(qiáng)制重新渲染組件的方法了。