Vue 組み込みコンポーネント: キープアライブ コンポーネントの導入と使用 (コード付き)

この記事の内容は、Vue の組み込みコンポーネントに関するものです。キープアライブ コンポーネントの紹介と使用法 (コード付き) が必要な方の参考になれば幸いです。 。

keep-alive の概要

keep-alive は、含まれているコンポーネントが状態を保持したり、再レンダリングを回避したりできるようにする Vue の組み込みコンポーネントです。 keep-alive是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。
在vue 2.1.0 版本之后，keep-alive新加入了两个属性: include(包含的组件缓存) 与 exclude(排除的组件不缓存，优先级大于include) 。

使用方法

<keep-alive include=&#39;include_components&#39; exclude=&#39;exclude_components&#39;>
  <component>
    <!-- 该组件是否缓存取决于include和exclude属性 -->
  </component>
</keep-alive>

参数解释
include - 字符串或正则表达式，只有名称匹配的组件会被缓存
exclude - 字符串或正则表达式，任何名称匹配的组件都不会被缓存
include 和 exclude 属性允许组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示。当使用正则或者是数组时，一定要使用v-bind !

使用示例

<!-- 逗号分隔字符串，只有组件a与b被缓存。 -->
<keep-alive include="a,b">
  <component></component>
</keep-alive>

<!-- 正则表达式 (需要使用 v-bind，符合匹配规则的都会被缓存) -->
<keep-alive :include="/a|b/">
  <component></component>
</keep-alive>

<!-- Array (需要使用 v-bind，被包含的都会被缓存) -->
<keep-alive :include="[&#39;a&#39;, &#39;b&#39;]">
  <component></component>
</keep-alive>

使用场景

1、尽管可以通过正则表达式来include和exclude一些组件，但用的更多是通过router.meta属性明确的指定该组件是否要缓存

router.meta配置

...
    {
        path: 'edit',
        component: () => import('@/views/site/edit'),
        name: 'site.edit',
        meta: {
            title: '网址编辑',
            hidden: true,
            cache: false
        }
    },
    {
        path: 'list',
        component: () => import('@/views/site/list'),
        name: 'site.list',
        meta: {
            title: '网址列表',
            hidden: false,
            cache: true
        }
    },
...

然后通过v-if标签来判断是否需要缓存

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

<!-- 不缓存 -->
<router-view v-if="!$route.meta.cache"></router-view>

2、不同的页面切换，刷新规则不同：B->A不刷新， C-A刷新

路由A的配置

{
        path: '/',
        name: 'A',
        component: A,
        meta: {
            cache: true // 需要被缓存
        }
}

组件B配置

export default {
        data() {
            return {};
        },
        methods: {},
        beforeRouteLeave(to, from, next) {
             // 设置下一个路由的 meta
            to.meta.cache = true;  // 让 A 缓存，即不刷新
            next();
        }
};

组件C配置

export default {
        data() {
            return {};
        },
        methods: {},
        beforeRouteLeave(to, from, next) {
            // 设置下一个路由的 meta
            to.meta.cache = false; // 让 A 不缓存，即刷新
            next();
        }
};

注意事项

如果组件被缓存，created() vue バージョン 2.1.0 以降、keep-alive には、include (含まれるコンポーネントがキャッシュされる) と exclude (除外されるコンポーネントはキャッシュされず、include より優先度が高い) という 2 つの新しい属性が追加されました。

使用法

export default {
        data() {
            return {};
        },

        created() {
            // do some thing...
        },
        methods: {},
};

パラメータの説明

include - 文字列または正規表現、一致する名前を持つコンポーネントのみがキャッシュされますexclude - 文字列または正規表現、一致する名前はキャッシュされません。 include 属性と exclude 属性を使用すると、コンポーネントを条件付きでキャッシュできます。どちらも、カンマ区切りの文字列、正規表現、または配列として表すことができます。正規表現または配列を使用する場合は、必ず v-bind を使用してください。

使用例

rrreee使用シナリオ

1. 正規表現を使用して一部のコンポーネントを含めたり除外したりできますが、より一般的に使用されるのは、router.meta 属性

router.meta 設定rrreee

を通じてコン​​ポーネントをキャッシュするかどうかを明示的に指定してから渡すことです。 v-if タグでキャッシュが必要かどうかを判断しますrrreee

2. 異なるページ切り替えには異なる更新ルールがあります: B->A は更新されず、C-A は更新されます

ルート A

rrreee🎜コンポーネント B 構成🎜rrreee🎜コンポーネント C 構成🎜rrreee🎜注意事項🎜🎜 コンポーネントがキャッシュされている場合、created() メソッドは実行されません。通常、作成したメソッドでデータをリクエストし、リストをロードします。現在のページがキャッシュされ、バックグラウンド データが更新されると、その時点でデータがフォアグラウンドに表示されなくなります。手動で。 🎜コンポーネントをキャッシュする必要があるかどうかは、状況によって異なります🎜rrreee🎜関連する推奨事項:🎜🎜🎜vue カスタム選択組み込みコンポーネント🎜🎜🎜🎜vue 組み込み命令の使用法の概要🎜🎜🎜🎜🎜Vue コンポーネント オプションの小道具🎜🎜

以上がVue 組み込みコンポーネント: キープアライブ コンポーネントの導入と使用 (コード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。