Vue 3.0 處理邊界情況

該頁面假設(shè)你已經(jīng)閱讀過了組件基礎(chǔ)。如果你還對(duì)組件不太了解，推薦你先閱讀它。

提示

這里記錄的都是和處理邊界情況有關(guān)的功能，即一些需要對(duì) Vue 的規(guī)則做一些小調(diào)整的特殊情況。不過注意這些功能都是有劣勢(shì)或危險(xiǎn)的場(chǎng)景的。我們會(huì)在每個(gè)案例中注明，所以當(dāng)你使用每個(gè)功能的時(shí)候請(qǐng)稍加留意。

#控制更新

得益于其響應(yīng)性系統(tǒng)，Vue 總是知道何時(shí)更新 (如果你使用正確的話)。但是，在某些邊緣情況下，你可能希望強(qiáng)制更新，盡管事實(shí)上沒有任何響應(yīng)式數(shù)據(jù)發(fā)生更改。還有一些情況下，你可能希望防止不必要的更新。

#強(qiáng)制更新

如果你發(fā)現(xiàn)自己需要在 Vue 中強(qiáng)制更新，在 99.99%的情況下，你在某個(gè)地方犯了錯(cuò)誤。例如，你可能依賴于 Vue 響應(yīng)性系統(tǒng)未跟蹤的狀態(tài)，例如，在組件創(chuàng)建之后添加了 data 屬性。

但是，如果你已經(jīng)排除了上述情況，并且發(fā)現(xiàn)自己處于這種非常罕見的情況下，必須手動(dòng)強(qiáng)制更新，那么你可以使用 $forceUpdate。

#低級(jí)靜態(tài)組件與 v-once

在 Vue 中渲染純 HTML 元素的速度非常快，但有時(shí)你可能有一個(gè)包含很多靜態(tài)內(nèi)容的組件。在這些情況下，可以通過向根元素添加 v-once 指令來確保只對(duì)其求值一次，然后進(jìn)行緩存，如下所示：

app.component('terms-of-service', {
  template: `
    <div v-once>
      <h1>Terms of Service</h1>
      ... a lot of static content ...
    </div>
  `
})

TIP

再次提醒，不要過度使用這種模式。雖然在極少數(shù)情況下需要渲染大量靜態(tài)內(nèi)容時(shí)很方便，但除非你注意到渲染速度——慢，否則就沒有必要這樣做—另外，這可能會(huì)在以后引起很多混亂。例如，假設(shè)另一個(gè)開發(fā)人員不熟悉 v-once 或者只是在模板中遺漏了它。他們可能會(huì)花上幾個(gè)小時(shí)來弄清楚為什么模板沒有正確更新。