Vue開発--keep-aliveの詳細

prop:

include:文字列または正規表現.一致するコンポーネントのみがキャッシュされます.2.1.0+

exclude:文字列または正規表現.一致するコンポーネントはキャッシュされません(excludeの優先度はincludeより大きい).2.1.0+

max最大キャッシュ可能コンポーネントインスタンス2.5.0+

activatedおよびdeactivateライフサイクルフック

は、キャッシュインスタンスがないため、関数コンポーネントで正常に動作しません.

<keep-alive include="a,b" :include="['a','b']" :exclude="/a|b/" :max="10">
  <component :is='view'></component>
</keep-alive>

使用法:はVueの内蔵コンポーネントで、コンポーネントの切り替え中に状態をメモリに保持し、DOMの繰り返しレンダリングを防ぐことができます.動的コンポーネントがラップされると、それらを破棄するのではなく、アクティブでないコンポーネントインスタンスがキャッシュされます.とは似ています.抽象的なコンポーネントです.DOMツリーではレンダリングされません.親コンポーネントチェーンにも存在しません.たとえば、あなたは永遠にthis.$parentにはkeep-aliveが見つかりません.
コンポーネントが内で切り替わると、activatedとdeactivatedの2つのライフサイクルフック関数が対応して実行されます.

//   
export default {
  name: 'test-keep-alive',
  data () {
    return {
        includedComponents: "test-keep-alive"
    }
  }
}

<keep-alive include="test-keep-alive">
  <!--    name test-keep-alive    -->
  <component></component>
</keep-alive>

<keep-alive include="a,b">
  <!--    name a  b   ，         -->
  <component :is="view"></component>
</keep-alive>

<!--        ，   v-bind -->
<keep-alive :include="/a|b/">
  <component :is="view"></component>
</keep-alive>

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

<keep-alive exclude="test-keep-alive">
  <!--     name test-keep-alive    -->
  <component></component>
</keep-alive>

2、routerと組み合わせて、一部のページをキャッシュする
$routeを使用metaのkeepAliveプロパティ:

<keep-alive>
    <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>

routerでrouterのメタ情報metaを設定する必要があります.

//...router.js
export default new Router({
  routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello,
      meta: {
        keepAlive: false //      
      }
    },
    {
      path: '/page1',
      name: 'Page1',
      component: Page1,
      meta: {
        keepAlive: true //      
      }
    }
  ]
})

効果を使用するには、上記のrouterのコードを例に挙げます.

// Page1  
<template>
  <div class="hello">
    <h1>Vue</h1>
    <h2>{{msg}}</h2>
    <input placeholder="   "></input>
  </div>
</template>
// Hello  
<template>
  <div class="hello">
    <h1>{{msg}}</h1>
  </div>
</template>

(1)Page 1ページ入力ボックスに「asd」と入力し、手動でHelloページにジャンプする.
(2)Page 1ページに戻って発見する前に入力した「asd」は依然として残っており、ページ情報がメモリに正常に保存されたことを示している.
もちろん、routeを動的に設定することもできます.metaのkeepAliveプロパティは、vue-routerのkeep-aliveというブログの例を参考にして、他のニーズを実現します.

トップページはAページ

BページはAにジャンプし、Aページは

をキャッシュする必要がある.

CページはAにジャンプし、Aページはキャッシュ

を必要としない.
各ルーティングのbeforeRouteLeave(to,from,next)フックにtoを設定ことが考えられる.meta.keepAlive:
Aの経路:

{
    path: '/',
    name: 'A',
    component: A,
    meta: {
        keepAlive: true //      
    }
}

export default {
    data() {
        return {};
    },
    methods: {},
    beforeRouteLeave(to, from, next) {
         //          meta
        to.meta.keepAlive = true;  // B     A  ，  A   ，    
        next();
    }
};

export default {
    data() {
        return {};
    },
    methods: {},
    beforeRouteLeave(to, from, next) {
        //          meta
        to.meta.keepAlive = false; // C     A    A    ，   
        next();
    }
};

3、keep-aliveライフサイクルフック関数:activated、deactivatedがに作成されたコンポーネントに含まれ、2つのライフサイクルのフックが追加されます:activatedとdeactivated
Activated:コンポーネントがアクティブ化されるたびに呼び出され、コンポーネントが最初にレンダリングされるたびに呼び出され、keep-aliveがアクティブ化されるたびに呼び出されます.
deactivated:コンポーネントが非アクティブになったときに呼び出されます.
注意:この2つのライフサイクルは、コンポーネントがに包まれている場合にのみ呼び出されます.通常のコンポーネントとして使用されている場合は呼び出されません.また、バージョン2.1.0以降、excludeを使用して除外された後も、に包まれていても、この2つのフックは呼び出されません.また、このフックは、サービス側でレンダリングされても呼び出されません.
keepAliveキャッシュのコンポーネントが設定されています.

最初のアクセス:beforeRouterEnter->created->...->activated->deactivated

後続アクセス時:beforeRouterEnter->activated->deactivated

このコンポーネントに最初にアクセスした場合にのみcreatedフックが使用され、キャッシュする必要があるコンポーネントのactivatedは毎回使用されるフック関数であることがわかります.したがって、このフックでは、現在のコンポーネントがキャッシュされたデータを使用する必要があるのか、取得したデータを再リフレッシュする必要があるのかを判断します.を使用すると、データはメモリに保持され、ページに入るたびに最新のデータを取得するにはactivatedフェーズでデータを取得し、元のcreatedフックでデータを取得するタスクを担当する必要があります.
シーンシーン:Vueで前進リフレッシュ、後退キャッシュユーザーブラウズデータ

リストページ=>クリックして詳細ページに入る=>リストページに戻るリスト元データ

をキャッシュする.

リストページへの再アクセス=>最新のデータの取得

// router.js
{
  path: '/list',
  name: 'List',
  component: List,
  meta: {
    isUseCache: false, //      
    keepAlive: true  //      keep-alive
  }
}

//     
activated() {
  if(!this.$route.meta.isUseCache){ //isUseCache     router     ，       
    this.list = [] //      
    this.onload() //     
  }
}

//             ，      
beforeRouteLeave(to, from, next){
  if(to.name=='Detail'){
    from.meta.isUseCache = true
  }
  next()
}

//      activated
activated() {
 if(!this.$route.meta.isUseCache){ //isUseCache     router     ，       
    this.list = [] //      
    this.onload() //     
  }
 this.$route.meta.isUseCache = false //         
}