Vue のキープアライブ コンポーネントによりユーザー ページの切り替えがスムーズになる仕組み

Vue のキープアライブ コンポーネントによってユーザー ページの切り替えがスムーズになる仕組み

最新の Web アプリケーションでは、ユーザーが頻繁にページを切り替えることが非常に一般的です。このようにページを頻繁に切り替えると、ページの再レンダリングやコンポーネントの再読み込みなどのパフォーマンスの問題が発生し、ページの切り替えがスムーズでなくなる可能性があります。人気のあるフロントエンド フレームワークとして、Vue.js はキープアライブと呼ばれるコンポーネントを提供します。これは、ユーザー ページの切り替えのスムーズさを向上させるのに役立ちます。

キープアライブ コンポーネントの機能は、コンポーネントの状態をキャッシュして、コンポーネントの繰り返しレンダリングを回避することです。コンポーネントがキープアライブ コンポーネントでラップされると、そのコンポーネントは破棄されずにキャッシュされます。このようにして、同じコンポーネントに切り替えるたびに、Vue はコンポーネントの状態をキャッシュから直接読み取り、コンポーネントの再レンダリングの時間を節約します。

以下では、簡単な例を使用して、キープアライブ コンポーネントがユーザー ページの切り替えのスムーズさをどのように向上させるかを説明します。

ComponentA と ComponentB という 2 つのコンポーネントがあるとします。 ComponentA は、何らかのデータを表示するために使用されるリスト コンポーネントであり、ComponentB は、リスト内の項目の詳細情報を表示するために使用される詳細コンポーネントです。ユーザーがリスト内の項目をクリックして詳細ページに切り替えたとき、リスト ページのスクロール位置を変更しないようにしたいと考えます。

まず、App.vue にキープアライブ コンポーネントを導入し、対応するルートに name 属性を設定して、コンポーネントのキャッシュされた識別子を指定します。

<template>
  <div>
    <keep-alive>
      <router-view/>
    </keep-alive>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

次に、リスト コンポーネント ComponentA で、テンプレートのコンテンツを変更し、ループ トラバーサルを通じてリスト項目を表示する必要があります。

<template>
  <ul>
    <li v-for="item in list" :key="item.id" @click="showDetail(item)">
      {{ item.name }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { id: 1, name: 'Apple' },
        { id: 2, name: 'Banana' },
        { id: 3, name: 'Orange' }
      ]
    }
  },
  methods: {
    showDetail(item) {
      // 切换到详情页，并传递选中项的数据
      this.$router.push({
        name: 'Detail',
        params: { item }
      })
    }
  }
}
</script>

詳細コンポーネント ComponentB では、ページがロードされたときのスクロール位置をマウントされたフック関数に保存し、アクティブ化されたフック関数でその位置を復元します。

<template>
  <div>
    <h2>{{ selectedItem.name }}</h2>
    <p>Details: {{ selectedItem.details }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedItem: {}
    }
  },
  mounted() {
    // 保存页面加载时的滚动位置
    this.$store.commit('saveScrollPosition', window.pageYOffset)
  },
  activated() {
    // 恢复页面切换时的滚动位置
    window.scrollTo(0, this.$store.state.scrollPosition)
  },
  created() {
    // 获取传递过来的选中项数据
    this.selectedItem = this.$route.params.item
  }
}
</script>

最後に、ルーティング設定に ComponentB のルートを追加し、name 属性を指定します。

import Vue from 'vue'
import VueRouter from 'vue-router'
import ComponentA from '@/components/ComponentA.vue'
import ComponentB from '@/components/ComponentB.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'ComponentA',
    component: ComponentA
  },
  {
    path: '/detail',
    name: 'Detail',
    component: ComponentB
  }
]

const router = new VueRouter({
  routes
})

export default router

キープアライブ コンポーネントを使用すると、ユーザーがページを切り替えたときにリスト ページのスクロール位置を保持できるため、ユーザー エクスペリエンスが向上します。これは、リスト コンポーネントが再レンダリングされずにキャッシュされるためです。再度リストページに切り替えると、データを再読み込みしてコンポーネントを表示することなく、コンポーネントの状態が直接復元されます。

要約すると、Vue のキープアライブ コンポーネントはユーザー ページの切り替えのスムーズさを向上させることができ、コンポーネントのステータスをキャッシュすることでコンポーネントの再レンダリングを減らし、ユーザー エクスペリエンスを向上させることができます。ページ切り替えのパフォーマンスを改善する必要があるシナリオでは、キープアライブ コンポーネントを合理的に使用することが良い選択となります。

以上がVue のキープアライブ コンポーネントによりユーザー ページの切り替えがスムーズになる仕組みの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。