JS毎日一題:vue中keepaliveはどのように理解しますか?

20190212問
vueのkeepaliveはどう理解しますか?
前に、keep-aliveはvueソースコードで実現されたコンポーネントであり、興味のあるソースコードgithubを研究することができる.com/vuejs/vue/b…
keepaliveとは
我々は普段開発中で、常に一部のコンポーネントを複数回initする必要はありません.コンポーネントを持続化し、コンポーネントの状態を維持し、次の展示時にも再initを行う必要はありません.
keepaliveは生きているので、vueではkeepaliveを使用してコンポーネントキャッシュを行うことができます.
きほんしよう

//  keepalive           

    

keepaliveに含まれるコンポーネントが再initされないことは、ライフサイクル関数を再実行しないことを意味しますが、通常の作業では多くのビジネスシーンがキャッシュされているコンポーネントが再レンダリングできることを望んでいます.vueはkeepaliveに2つの追加のhookを提供しています.

activated keepaliveに含まれるコンポーネントが再レンダリングされると

がトリガーされます.

deactivated keepaliveに含まれるコンポーネントが破棄されると

がトリガーされる
注意:2.1.0以降keepaliveに含まれているがexcludeで除外されているコンポーネントには、以上の2つのhookはありません.
パラメータ
keepaliveは,3つの属性をパラメータとしてマッチングした対応するコンポーネントをキャッシュすることができる.

includeに含まれるコンポーネント

exclude除外コンポーネント

maxキャッシュコンポーネントの最大値

ここでinclude、excludeは文字、配列、および正規表現maxタイプが文字または数値であってもよい
コード理解

//      name a  b   
"a,b"> 
  "currentView" />


//     c      
"c"> 
  "currentView"/>


//       include,exclude,  exclude   include，            a  
"a,b" exclude="b"> 
  "currentView"/>


//           max    5，             
"c" max="5"> 
  "currentView"/>

routerとの併用

//     $router.meta.keepAlive           

    "$router.meta.keepAlive">

"!$router.meta.keepAlive">

//router  
new Router({
    routes: [
        {
            name: 'a',
            path: '/a',
            component: A,
            meta: {
                keepAlive: true
            }
        },
        {
            name: 'b',
            path: '/b',
            component: B
        }
    ]
})

まとめ
keepaliveは抽象コンポーネントであり、vnodeをキャッシュし、キャッシュされたコンポーネントはmountedされない.そのためactivatedとdeactivatedフック関数を提供し、props maxを使用してキャッシュコンポーネントの個数を制御することができる.
JS毎日一題について
JS毎日1題は1つの音声解答コミュニティが毎日破片時間を利用して60秒以内の音声形式を採用して当日の試験問題群主が翌日0時に当日の参考解答をプッシュすることと見なすことができる.

注は当日の任務を完成することに限らず、より多くは検査漏れと補充であり、学習グループ内の他の学生の優秀な解答構想

クリックしてクイズに参加