vue プロジェクトでキープアライブ コンポーネントを使用して更新効果を実現しない方法

keep-alive コンポーネントを使用して vue プロジェクトで更新不要の効果を実現する方法

Vue プロジェクトでは、ページを切り替えながらページのステータスを維持する必要がよく発生します。現時点では、Vue のキープアライブ コンポーネントを使用して、リフレッシュ不要の効果を実現できます。キープアライブ コンポーネントは、Vue によって提供される抽象コンポーネントであり、レンダリングの繰り返しを避けるためにコンポーネント インスタンスをキャッシュするために使用されます。

次に、簡単な例を使用して、キープアライブを使用してリフレッシュ不要の効果を実現する方法を紹介します。

まず、Vue プロジェクトを作成し、プロジェクト内に Home と About という 2 つのページを作成する必要があります。

ホームページでは、初期値 0 のカウンタが表示されます。ボタンをクリックするたびに、カウンタ値は 1 ずつ増加します。

<template>
  <div>
    <h2 id="Home页面">Home页面</h2>
    <p>计数器: {{ count }}</p>
    <button @click="increment">增加</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};
</script>

[バージョン情報] ページには、カウンタの値が表示され、ホームページに戻るための [戻る] ボタンが表示されます。

<template>
  <div>
    <h2 id="About页面">About页面</h2>
    <p>计数器的值: {{ count }}</p>
    <button @click="goBack">返回</button>
  </div>
</template>

<script>
export default {
  computed: {
    count() {
      return this.$store.state.count;
    }
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    }
  }
};
</script>

次に、ルーティング設定のホーム ページとバージョン情報ページにキープアライブ コンポーネントを追加する必要があります。

import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/views/Home.vue';
import About from '@/views/About.vue';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: () => import('@/views/Home.vue'),
      meta: {
        keepAlive: true // 设置keep-alive为true
      }
    },
    {
      path: '/about',
      name: 'About',
      component: () => import('@/views/About.vue'),
      meta: {
        keepAlive: false // 设置keep-alive为false
      }
    }
  ]
});

ここでは、ホームページのキープアライブを true に設定してキャッシュをオンにし、About ページのキープアライブを false に設定してキャッシュをオフにします。

最後に、キープアライブ コンポーネントを App.vue コンポーネントに追加し、ルートのキープアライブ構成に従ってキャッシュを動的にオンまたはオフにする必要があります。

<template>
  <div id="app">
    <keep-alive>
      <router-view :key="$route.fullPath"></router-view>
    </keep-alive>
  </div>
</template>

上記の設定により、ホーム ページの [増加] ボタンをクリックすると、カウンタ値が増加し、[概要] ページにジャンプして、ホーム ページに戻り、カウンタ値が増加します。値は変更されません。

概要:

上記の例を通じて、キープアライブ コンポーネントを使用することで、リフレッシュ不要の効果を簡単に実現できることがわかります。ルートのメタ属性を構成することで、コンポーネントのキャッシュ戦略を柔軟に制御できます。キープアライブ コンポーネントは、ページの状態を維持する必要がある場合や、レンダリングの繰り返しを防ぐ必要がある場合に適しています。

この記事の例が、キープアライブ コンポーネントを使用して Vue プロジェクトで更新不要の効果を実現する方法をより深く理解するのに役立つことを願っています。ご質問がございましたら、ディスカッションのためにメッセージを残してください。

以上がvue プロジェクトでキープアライブ コンポーネントを使用して更新効果を実現しない方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。