Vue提供了一種方法以組件級別全局刷新的方式。僅引入新內(nèi)容仍然需要對應(yīng)用程序進行適當(dāng)?shù)拈_發(fā)，因為需要執(zhí)行該組件的特定功能，例如在組件中重新加載數(shù)據(jù)。在您的Vue應(yīng)用程序中，您可以使用內(nèi)置的$forceUpdate()方法強制重新渲染Vue組件。在Vue中，組件是一個具有prop和模板的域，可以將其傳遞給其他組件，從而用于組成更大的應(yīng)用。

Vue.component('my-component', {
template: '
{{ foo }}
',
data: function () {
return { foo: 'bar' }
}
})

創(chuàng)建Vue組件非常簡單。可以在Vue實例中使用組件，如下代碼所示：

new Vue({
el: '#my-app'
})

在上面的例子中，組件僅僅是一個簡單的HTML塊，它實際上沒有進行任何操作，因此它是靜態(tài)的。然后如何實現(xiàn)動態(tài)的組件刷新？Vue 提供了一個現(xiàn)成的方法就是$forceUpdate()實例方法，只需在組件中添加一些邏輯代碼來實現(xiàn)動態(tài)刷新組件。

Vue.component('my-component', {
template: '
{{ foo }}Update foo
',
data: function () {
return { foo: 'bar' }
},
methods: {
updateFoo: function () {
this.foo = 'baz'
this.$forceUpdate()
}
}
})

在該代碼中，我們可以看到指定了一個名為updateFoo()的方法，該方法使用$forceUpdate()方法更新foo。使用更新功能時，如果組件引用了一個父對象的實例，并且該對象已經(jīng)在$watch中監(jiān)聽了發(fā)出變化的組件，則也會觸發(fā)組件刷新。

值得注意的是，強制更新可以增加組件的性能損耗，而且在某些情況下也可能會出現(xiàn)問題。只有在構(gòu)建Vue應(yīng)用程序時，當(dāng)某個值更新后，您才應(yīng)該更新該值。這樣，不需要強制更新將自動更新該組件。