項(xiàng)目需求

現(xiàn)在項(xiàng)目中有需要用戶輸入大量信息的頁面，在最下面有一個(gè)查看協(xié)議的跳轉(zhuǎn)鏈接。要求用戶在輸入完信息后去查看協(xié)議里面的內(nèi)容，返回的時(shí)候之前輸入的數(shù)據(jù)還在，避免用戶重復(fù)輸入數(shù)據(jù)。

需求分析

在看到這個(gè)需求之后，我的第一想法就是將用戶之前輸入的數(shù)據(jù)一一存起來，在查看完協(xié)議返回后，將之前的數(shù)據(jù)再放回去?？墒沁@樣操作實(shí)在太麻煩，每一項(xiàng)數(shù)據(jù)都要進(jìn)行存儲(chǔ)和讀寫，那有沒有辦法直接將我這個(gè)組件緩存起來呢？直到我看到了keep-alive

主角登場

什么是keep-alive

keep-alive是vue中一個(gè)內(nèi)置組件，放置在keep-alive中的組件都會(huì)在內(nèi)存中緩存起來，下次進(jìn)入的時(shí)候就不會(huì)需要重新加載，直接從內(nèi)存中取出來即可，避免一個(gè)重復(fù)渲染。

基本使用

• 用法

include 和 exclude 屬性允許組件有條件地緩存。二者都可以用逗號(hào)分隔字符串、正則表達(dá)式或一個(gè)數(shù)組來表示：

• include - 字符串或正則表達(dá)式。只有名稱匹配的組件會(huì)被緩存。
• exclude - 字符串或正則表達(dá)式。任何名稱匹配的組件都不會(huì)被緩存
• max 最多可以緩存多少組件實(shí)例。一旦這個(gè)數(shù)字達(dá)到了，在新實(shí)例被創(chuàng)建之前，已緩存組件中最久沒有被訪問的實(shí)例會(huì)被銷毀掉。

<!-- 逗號(hào)分隔字符串 -->
<keep-alive include="a,b">
  <component :is="view"></component>
</keep-alive>

<!-- 正則表達(dá)式 (使用 `v-bind`) -->
<keep-alive :include="/a|b/">
  <component :is="view"></component>
</keep-alive>

<!-- 數(shù)組 (使用 `v-bind`) -->
<keep-alive :include="['a', 'b']">
  <component :is="view"></component>
</keep-alive>

解決問題

看完keep-alive之后，這個(gè)需求就很簡單。只需要將輸入數(shù)據(jù)的頁面給他緩存起來就行，當(dāng)我從協(xié)議那邊返回的時(shí)候，直接從內(nèi)存里面取組件。如果我是從其他頁面進(jìn)來，就重新加載組件。

• 方法一

我在app.vue里面我watch一下路由，我默認(rèn)的就只緩存輸入數(shù)據(jù)的頁面，如果是從其他頁面進(jìn)來我就不緩存任何頁面。

<keep-alive :include="keepActive">
        <router-view ></router-view>
</keep-alive>

data() {
  return {
    keepActive: []
  }
}

watch:{
  $route(to, from) {
    this.keepActive = ['userInfo']
    if(to.name == 'protocol' || to.name == 'home') {
      this.keepActive = []
    }
  }
}

• 方法二

可以在router.vue里面，給指定需要緩存的組件配置上路由元信息，通過判斷設(shè)置的這個(gè)路由元信息是否存在，從而來緩存指定組件。

• 方法三

有人就說，你只需要緩存一個(gè)組件就行，為什么不直接丟到include里面？如果任何需求都是想的那么簡單，咱們程序員也不會(huì)每天摳腦門摳到掉發(fā)了。如果只緩存用戶輸入數(shù)據(jù)頁面，我從首頁進(jìn)入到用戶輸入數(shù)據(jù)的頁面的時(shí)候，只要你之前輸入過數(shù)據(jù)，這個(gè)數(shù)據(jù)還是會(huì)存在。所以我們?cè)谑褂玫臅r(shí)候，要根據(jù)自己的業(yè)務(wù)需求來，如果從任何頁面進(jìn)來都需要緩存，include大膽的用。如果有指定的頁面緩存，還是還是要配合路由來使用。功能已經(jīng)有了，怎么實(shí)現(xiàn)還得根據(jù)特定的項(xiàng)目需求來。

踩坑

我在設(shè)置指定的緩存組件時(shí)，始終發(fā)現(xiàn)組件緩存不生效。反復(fù)核對(duì)代碼，確定無誤，實(shí)在是找不出毛病，但他就是不生效。其實(shí)就是因?yàn)?code>include配置的name和組件內(nèi)的name不一樣，我在router文件中配置的name為大寫，組件內(nèi)部的name為小寫...提示一點(diǎn)，如果不加name緩存也不會(huì)生效