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>

上記のコードでは、