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

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

WBOY

リリース： 2023-07-23 12:57:11

オリジナル

1727 人が閲覧しました

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 サイトの他の関連記事を参照してください。