vue中有沒(méi)有緩存機(jī)制

這篇“vue中有沒(méi)有緩存機(jī)制”文章的知識(shí)點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來(lái)看看這篇“vue中有沒(méi)有緩存機(jī)制”文章吧。

vue中有緩存機(jī)制，可以利用“keep-alive”把切換出去的組件保留在內(nèi)存中，保留該組件的狀態(tài)或避免重新渲染，實(shí)現(xiàn)頁(yè)面緩存；“keep-alive”是一個(gè)vue內(nèi)置的抽象組件，用于緩存組件，避免多次加載相同的組件，減少性能消耗。

本文操作環(huán)境：windows10系統(tǒng)、Vue2.9.6版，DELL G3電腦。

vue中有緩存機(jī)制嗎

緩存，不管是PC 端還是移動(dòng)端，不可避免的問(wèn)題。vue中有一個(gè)keepAlive,這個(gè)api 基本 能實(shí)現(xiàn)我們開(kāi)發(fā)的一些需要。

簡(jiǎn)單介紹下keep-alive:

1、把切換出去的組件保留在內(nèi)存中，可以保留它的狀態(tài)或避免重新渲染，實(shí)現(xiàn)頁(yè)面緩存；

2、<keep-alive>是抽象組件，它自身不會(huì)渲染DOM元素，也不會(huì)出現(xiàn)在父組件鏈中。

3、當(dāng)組件在<keep-alive>內(nèi)被切換，它的actived 和 deactived 這兩個(gè)生命周期鉤子函數(shù)將會(huì)被對(duì)應(yīng)執(zhí)行。（這個(gè)基本沒(méi)什么）

注：在2.2.0及其更高版本中，activated 和 deactivated 將會(huì)在<keep-alive>樹(shù)內(nèi)的所有嵌套組件中觸發(fā)。

keep-alive是Vue的內(nèi)置組件，當(dāng)它包裹動(dòng)態(tài)組件時(shí)，會(huì)緩存不活動(dòng)的組件實(shí)例，而不是銷毀。

作用：

用來(lái)緩存組件，避免多次加載相同的組件，減少性能消耗，提高用戶體驗(yàn)。

使用方式舉例:

在App.vue中使用keep-alive標(biāo)簽，表示緩存所有頁(yè)面

  <div id="app">
  <keep-alive>
    <tar-bar></tar-bar>
    <div class="container">
      <left-menu></left-menu>
      <Main />
    </div>
    </keep-alive>
  </div>

部分頁(yè)面緩存

注意：其中transition 直接包在這兩個(gè)外面  會(huì)報(bào)錯(cuò)；直接用transition-group也會(huì)報(bào)錯(cuò)，需要用兩個(gè)transition。

以上就是關(guān)于“vue中有沒(méi)有緩存機(jī)制”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對(duì)大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。