v-once ディレクティブを使用して Vue でデータ バインディングの 1 回限りのレンダリングを実装する方法

Vue は、データ バインディング プロセスを簡素化するための多くの命令を提供する人気のあるフロントエンド JavaScript フレームワークです。非常に便利な命令の 1 つは v-once です。この記事では、v-once ディレクティブの使用方法と、Vue でデータ バインドされたワンタイム レンダリングを実装する方法について詳しく説明します。

v-once 命令とは何ですか?

v-once は Vue のディレクティブであり、その機能は要素またはコンポーネントのレンダリング結果をキャッシュして、後続の更新でレンダリング プロセスをスキップできるようにすることです。これにより、特にデータが頻繁に変更されない場合、レンダリングのパフォーマンスが大幅に向上します。

v-once ディレクティブを使用するための構文は非常に簡単です。キャッシュする必要がある要素またはコンポーネントにこのディレクティブを追加するだけです:

<template>
  <div v-once>
    {{ message }}
  </div>
</template>

上記のコードでは、 give

v-once ディレクティブの使用法

v-once ディレクティブは、単一の要素に対して使用するだけでなく、コンポーネントに対しても使用できます。コンポーネントで v-once ディレクティブを使用することは、要素で使用することと同じです。コンポーネントのルート要素にディレクティブを付加するだけです:

<template>
  <my-component v-once :data="data"></my-component>
</template>

上記のコードには、v があります。 -once ディレクティブはルート要素で使用され、data という属性が渡されます。これは、コンポーネントを 1 回だけレンダリングする必要があり、データ プロパティが変更された場合に Vue がコンポーネントを再レンダリングしないことを意味します。

v-once ディレクティブは、静的コンテンツ、つまりバインディング式を含まないコンテンツにのみ使用できることに注意してください。これは、v-once ディレクティブを使用する場合、要素またはコンポーネント内で補間構文やその他のバインド式を使用できないことを意味します。

もちろん、v-once 命令には他にも次のような使用法があります。

• v-for ループ内の要素に対して v-once 命令を使用すると、大幅に改善される可能性があります。リスト レンダリング パフォーマンス;
• テンプレートで v-once ディレクティブを使用すると、テンプレート全体のレンダリング結果をキャッシュし、後続のレンダリングで再利用できます。

Vue でデータ バインディングのワンタイム レンダリングを実装する方法

v-once ディレクティブの使用法を理解したところで、以下でこのディレクティブの使用方法を説明します。 Vue でデータ バインディングの 1 回限りのレンダリングを実現します。

複数のユーザー リスト項目を含むユーザー リスト コンポーネントがあるとします。リスト項目のボタンをクリックすると、リスト項目のステータスが削除済みステータスなどに変わります。この時点で、リスト項目をリストから消去したいと考えていますが、同時に、その後の操作のためにそのステータスを保持しておきたいと考えています。

この機能を実現するには、リスト項目コンポーネントで v-once ディレクティブを使用します。

<template>
  <li v-if="!deleted" v-once>
    {{ user.name }}
    <button @click="onDelete">删除</button>
  </li>
</template>

<script>
export default {
  props: ['user'],
  data() {
    return {
      deleted: false
    };
  },
  methods: {
    onDelete() {
      this.deleted = true;
    }
  }
};
</script>

上記のコードでは、

で v-once を使用します。 element ディレクティブ。これは、Vue がリスト項目の内容を計算するのは、リスト項目が最初にレンダリングされるときのみであることを意味します。ユーザーが削除ボタンをクリックすると、Vue がリスト項目を再レンダリングしないように、deleted 属性を true に設定します。

この時点では、リスト項目はリストから消えていますが、ステータスはまだ保持されています。このようにして、データ バインディングの 1 回限りのレンダリングを実現します。

概要

Vue では、v-once ディレクティブを使用して要素またはコンポーネントをキャッシュし、後続の更新でレンダリング プロセスをスキップできるようにすることで、レンダリング パフォーマンスを向上させることができます。一部の特定のシナリオでは、v-once 命令を使用してデータ バインディングの 1 回限りのレンダリングを実現し、特別なニーズを満たすことができます。 v-once ディレクティブは静的コンテンツ、つまりバインディング式を含まないコンテンツにのみ適用されることに注意してください。

以上がv-once ディレクティブを使用して Vue でデータ バインディングの 1 回限りのレンダリングを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。