Vue のキープアライブ コンポーネントを使用してページ要素の再利用を実装する方法

Vue は、豊富な機能と使いやすい API を備えた人気の JavaScript フレームワークです。よく使用される関数の 1 つは keep-alive コンポーネントです。これにより、ページ要素を再利用し、ページのパフォーマンスとユーザー エクスペリエンスを向上させることができます。

Vue では、コンポーネントが破棄されると、すべてのデータと状態も破棄されます。ただし、ユーザーが再度アクセスしたときにデータをすぐに復元できるように、コンポーネントの状態を保持できるようにしたい場合があります。この場合、keep-alive コンポーネントが役に立ちます。

キープアライブ コンポーネントは、ラップするコンポーネントを毎回破棄して再作成するのではなく、キャッシュすることができます。コンポーネントがビューを離れるとき、コンポーネントは破棄されずにメモリ内に残り、次の使用を待ちます。コンポーネントが再度レンダリングされると、キャッシュ内のコンポーネント インスタンスは再作成されずに直接使用されます。

具体的な例を見てみましょう。リスト コンポーネント List があり、その子コンポーネントが Item であり、各 Item が独自の状態を持っているとします。

List コンポーネント:

<template>
  <div>
    <button @click="showList = !showList">{{ showList ? '隐藏' : '显示' }}列表</button>
    <hr>
    <keep-alive>
      <Item v-if="showList" v-for="item in list" :key="item.id" :data="item"></Item>
    </keep-alive>
  </div>
</template>

<script>
import Item from './Item'

export default {
  components: { Item },
  data() {
    return {
      showList: true,
      list: [
        { id: 1, name: '第一项' },
        { id: 2, name: '第二项' },
        { id: 3, name: '第三项' }
      ]
    }
  }
}
</script>

Item コンポーネント:

<template>
  <div>
    <h3 id="data-name">{{ data.name }}</h3>
    <button @click="count++">增加计数</button>
    <p>计数: {{ count }}</p>
  </div>
</template>

<script>
export default {
  props: ['data'],
  data() {
    return {
      count: 0
    }
  }
}
</script>

上記の例では、List 内にあります。 keep-alive コンポーネントは、Item コンポーネントをラップするためにコンポーネント内で使用されます。ボタンをクリックすると、リストは破棄および再作成されずに表示または非表示になります。

keep-alive コンポーネントを使用する場合、Vue がコンポーネントを正しくキャッシュして再利用します。 さらに、キャッシュされたコンポーネント インスタンスは、created および

destroyed

ライフ サイクル フック関数を呼び出さず、代わりに activated および ## を呼び出します。 #deactivated フック関数。したがって、コンポーネントがキャッシュされたときに何らかの操作を実行したい場合は、activated を使用でき、コンポーネントがビューを離れるときにいくつかの操作を実行したい場合は、deactivated を使用できます。 要約すると、Vue の keep-alive コンポーネントはページ要素を再利用し、ページのパフォーマンスとユーザー エクスペリエンスを向上させることができます。キャッシュする必要があるコンポーネントを keep-alive

コンポーネントでラップすることで、不必要なコンポーネントの破棄と再作成を回避し、ページの読み込み速度と応答性を向上させることができます。同時に、キャッシュされたコンポーネントごとに一意の

key 値を設定することに注意する必要があり、activated および deactivated フック関数を使用して、コンポーネントを操作します。

以上がVue のキープアライブ コンポーネントを使用してページ要素の再利用を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。