Vue コンポーネント通信: ワンタイム補間通信には v-once ディレクティブを使用します-PHPチュートリアル-php.cn

Vue コンポーネント通信: ワンタイム補間通信には v-once ディレクティブを使用します

王林

リリース： 2023-07-07 15:28:01

オリジナル

971 人が閲覧しました

Vue コンポーネント通信: 1 回限りの補間通信には v-once ディレクティブを使用する

Vue では、コンポーネント通信は重要な概念であり、これにより、異なるコンポーネント間のデータ転送と対話が可能になります。 Vue は、コンポーネント通信を実装する複数の方法を提供します。その 1 つは、1 回限りの補間通信に v-once ディレクティブを使用することです。この記事では、v-once ディレクティブの使い方を詳しく紹介し、コード例を使用して理解を深めます。

1. v-once ディレクティブとは
v-once は Vue によって提供されるディレクティブです。要素またはコンポーネントをマークするために使用され、要素またはコンポーネントが 1 回だけレンダリングされ、その後の更新でレンダリングされるようになります。無視される。 v-once を使用すると、無関係な更新操作を回避し、パフォーマンスを向上させることができます。

2. v-once ディレクティブの使用法
v-once ディレクティブの使用法は非常に簡単で、要素またはコンポーネントに v-once 属性を追加するだけです。

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

ログイン後にコピー

上記のコードでは、v-once 属性を div 要素に追加しました。これは、要素が 1 回だけレンダリングされ、その後の更新操作は無視されることを意味します。 div 要素では、{{ message }} 補間構文を使用して変数の値を表示します。この変数が変更されると、v-once が存在するため、再レンダリングはトリガーされません。

3. v-once 命令のアプリケーションシナリオ
v-once 命令のアプリケーションシナリオは、以下にいくつかの例を通して示すように、比較的柔軟です。

静的データの表示
表示する必要があるデータが静的で不変の場合、v-once を使用して不必要な更新レンダリングを回避できます。たとえば、記事の詳細ページでは、記事の内容に加えて、公開時間、著者、その他の情報などの要素は静的であり、変更されません。
```
<template>
  <div>
 <h1>{{ title }}</h1>
 <p v-once>{{ author }}</p>
 <p v-once>{{ publishDate }}</p>
 <div v-once>{{ content }}</div>
  </div>
</template>

<script>
export default {
  data() {
 return {
   title: 'Vue 组件通信',
   author: 'John',
   publishDate: '2022-01-01',
   content: '文章内容...'
 }
  }
}
</script>
```
ログイン後にコピー
上記のコードでは、記事のタイトル (title) と内容 (content) が変更される可能性があることを除いて、著者 (author) と公開時刻 (publishDate) は静的であり、変更されません。、v-once を使用して、不必要な更新のレンダリングを回避できます。
大きなデータリストの表示
大きなデータリストを表示する必要がある場合、パフォーマンスを向上させるために、通常は、表示領域のデータのみがレンダリングされます。リスト全体。この時点で、v-once 命令を使用して表示領域にデータをレンダリングできるため、コンポーネントの更新の数が減ります。
```
<template>
  <ul>
 <li v-for="item in visibleList" v-once :key="item.id">
   {{ item.content }}
 </li>
  </ul>
</template>

<script>
export default {
  data() {
 return {
   list: [
     { id: 1, content: '数据1' },
     { id: 2, content: '数据2' },
     { id: 3, content: '数据3' },
     { id: 4, content: '数据4' },
     ...
   ],
   visibleList: []
 }
  },
  mounted() {
 this.visibleList = this.list.slice(0, 10); // 只渲染可见区域的数据
  }
}
</script>
```
ログイン後にコピー
上記のコードでは、v-for 命令をループしてリストデータリストをレンダリングし、v-once 命令を使用してリスト項目要素をマークして、リスト項目要素が 1 回だけレンダリングされるようにし、その後もレンダリングされるようにしています。更新は無視されます。このようにして、非表示のリスト項目の不必要な更新を回避し、パフォーマンスを向上させることができます。

4. まとめ
この記事では、Vue コンポーネント通信において、v-once 命令を使って 1 回限りの補間通信を行う方法を紹介します。 v-once ディレクティブを使用すると、無関係な更新操作を回避し、コンポーネントのレンダリングパフォーマンスを向上させることができます。静的データの表示やビッグデータのリスト表示などのシナリオでは、v-once 命令が重要な役割を果たします。

この記事が、コンポーネント通信のための v-once ディレクティブの理解と使用に役立つことを願っています。読んでくれてありがとう！
以上がVue コンポーネント通信: ワンタイム補間通信には v-once ディレクティブを使用しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。