【Vue】keep-alive

1380 ワード
vue 先端
keep-aliveはVueが私たちに提供してくれた高次コンポーネントです.keep-aliveキャッシュを使用して、キャッシュするコンポーネントをキャッシュし、パフォーマンスを節約できます.コンポーネントがkeep-alive内で切り替えられると、コンポーネントのactivated、deactivatedの2つのライフサイクルフック関数が実行されます.keep-aliveに包まれたコンテンツはキャッシュされます.もちろん、すべてのページがキャッシュされるわけではありません.Vueはinclude、excludeの2つの属性を提供し、条件付きのキャッシュを提供しています.

上記のコードは、nameListというコンポーネントがキャッシュされ、adminListというコンポーネントを除いてキャッシュされることを示しています.正則を使用して、必要なコンポーネント名を一致させることができます.実際のプロジェクト開発では、iView adminでコンポーネントキャッシュ機能がカプセル化されているように、routerのmeta構成と組み合わせて、必要に応じてコンポーネントキャッシュを行うことができます.

キャッシュ・リストをバインドし、キャッシュ・リストがどのように実装されるかを見てみましょう.
cacheList () {
   return this.tagNavList.length ? this.tagNavList.filter(item => !(item.meta && item.meta.notCache)).map(item => item.name) : []
},

これがルーティング構成のnotCacheがfalseであるルーティング名をフィルタリングすることです
{
    path: '/login',
    name: 'login',
    meta: {
      title: 'Login -   ',
      notCache: true
    },
    component: Login
  },

これがルーティングファイルの構成です
X205TA　サウンド対応カーネルのダウンロード
vueでよく使用される親子コンポーネントの値伝達