VUE v-for の :key の詳細な説明

VUE v-for の :key の詳細な説明

v-for タグにキーが追加されていない場合。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
  <メタ文字セット="UTF-8">
  <meta http-equiv="X-UA-compatible" content="IE=edge">
  <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
  <script src="../../js/vue.js"></script>
  <title>v-for キーについて</title>
</head>
<本文>
  <div id="アプリ">
    <div>
      <input type="text" v-model="名前">
      <button @click="add">追加</button>
    </div>
    <ul>
      <li v-for="(リスト内の項目、インデックス)">
        <input type="checkbox"> {{item.name}}
      </li>
    </ul>
  </div>
  <script type="text/javascript">
    constアプリ = 新しいVue({
      el: '#app',
      データ() {
        戻る {
          名前: ''、
          新しいID: 3,
          リスト: [
            { id: 1, name: '张三' },
            { id: 2, 名前: 'Li Si' },
            { id: 3、名前: '王五' }
          ]、
        };
      },
      計算: {
      },
      メソッド: {
        追加() {
          //これはunshiftであることに注意してください
          this.list.unshift({ id: ++this.newId, name: this.name })
          this.name = ''
        }
      },
    });
  </スクリプト>
  <スタイルスコープ>
  </スタイル>
</本文>
</html>

李斯を選択して趙柳を加えた後、選択された人物は張三になりました。

ここに画像の説明を挿入

ここに画像の説明を挿入

v-for にキーがある場合を見てみましょう。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
  <メタ文字セット="UTF-8">
  <meta http-equiv="X-UA-compatible" content="IE=edge">
  <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
  <script src="../../js/vue.js"></script>
  <title>v-for キーについて</title>
</head>
<本文>
  <div id="アプリ">
    <div>
      <input type="text" v-model="名前">
      <button @click="add">追加</button>
    </div>
    <ul>
      <li v-for="(item, index) in list" :key="item.id">
        <input type="checkbox"> {{item.name}}
      </li>
    </ul>
  </div>
  <script type="text/javascript">
    constアプリ = 新しいVue({
      el: '#app',
      データ() {
        戻る {
          名前: ''、
          新しいID: 3,
          リスト: [
            { id: 1, name: '张三' },
            { id: 2, 名前: 'Li Si' },
            { id: 3、名前: '王五' }
          ]、
        };
      },
      計算: {
      },
      メソッド: {
        追加() {
          //これはunshiftであることに注意してください
          this.list.unshift({ id: ++this.newId, name: this.name })
          this.name = ''
        }
      },
    });
  </スクリプト>
  <スタイルスコープ>
  </スタイル>
</本文>
</html>

ここに画像の説明を挿入

ここに画像の説明を挿入

Li Si を選択して Zhao Liu を追加した後、選択された人物は依然として Li Si であり、変更はありません。

これは、Vue の下部にある Diff アルゴリズムによるものです。 diff アルゴリズムの処理方法は、次の図に示すように、操作の前後で DOM ツリーの同じレベルにあるノードをレイヤーごとに比較することです。

ここに画像の説明を挿入

レイヤー内に同一のノード、つまりリスト ノードが多数ある場合、Diff アルゴリズムの更新プロセスもデフォルトで上記の原則に従います。

たとえば、次のような状況を考えてみましょう。

ここに画像の説明を挿入

B と C の間に F を追加したいと考えています。Diff アルゴリズムのデフォルトの実装は次のとおりです。

ここに画像の説明を挿入

つまり、C を F に、D を C に、E を D に更新し、最後に E を挿入します。これは非効率的ではありませんか?

したがって、Diff アルゴリズムがノードを正しく識別し、新しいノードを挿入する正しい場所を見つけられるように、キーを使用して各ノードを一意に識別する必要があります。

ここに画像の説明を挿入

vue のリスト ループには、key = "一意の識別子" を追加する必要があります。一意の識別子は、アイテム内の id インデックスなどになります。vue コンポーネントは再利用性が高いため、Key を追加するとコンポーネントの一意性を識別できます。各コンポーネントをより適切に区別するために、キーの主な機能は、仮想 DOM を効率的に更新することです。

要約する

この記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。

以下もご興味があるかもしれません:
  • Vue における v-for のキーの一意性の詳細な説明
  • Vue で v-for を使用するときに、インデックスをキーとして使用できないのはなぜですか?
  • VUEデモv-forにキーを追加する理由についての簡単な説明
  • vue v-for のループをトラバースするときにキー値エラーが発生する問題を解決する
  • Vue の v-for ループの主要属性に関する考慮事項のまとめ
  • Vue 2.0 の v-for 反復構文の変更点 (キー、インデックス) に関する簡単な説明

<<:  HTMLポップアップ透明レイヤーインスタンスのサイズを設定でき、比例することができます

>>:  Ubuntu のインストール グラフィック ドライバーと Cuda チュートリアル

推薦する

フレームセットの共通プロパティ(フレームとウィンドウの分割)

フレームとは、Web ページ画面を複数のフレームに分割したもの(複数の Web ページという形で表示...

WeChat アプレット計算機の例

WeChatアプレット計算機の例、参考までに、具体的な内容は次のとおりです。インデックス.wxml ...

Mybatis+mysqlはストアドプロシージャを使用してシリアル番号実装コードを生成します。

同時操作によるデータの重複を避けるために、データベースを操作するときにストアドプロシージャを使用して...

優れた UI (ユーザー インターフェース) デザイナーになるための 20 の道標

はじめに: インターフェイス デザイナーの Joshua Porter が自身のブログでこの記事を公...

Linux ディスク パーティションの実装の原理と方法の分析

覚えて: IDE ディスク: 最初のディスクは hda、2 番目のディスクは hdb...最初のディ...

Docker に Tomcat をインストールし、Springboot プロジェクトの WAR パッケージをデプロイする方法

簡単です。チュートリアルを見てください。ブロガー1. まずdockerを起動するサービスdocker...

VMware 仮想マシンのインストール Linux システムのグラフィック チュートリアル

この記事では、LinuxシステムのVMwareインストールの具体的な手順を参考までに紹介します。具体...

Ubuntu 16.04/18.04 に Pycharm と Ipython をインストールするチュートリアル

Ubuntu 18.04の場合1. sudo apt install python 。コマンドライン...

子ども向けウェブサイトの視覚構造レイアウト設計手法の分析

1. 温かくて優しい関連アドレス: http://www.web-designers.cn/post...

Tomcat Nativeを使用してTomcat IO効率を向上させる方法の詳細な説明

目次導入Tomcatへの接続方法APR と Tomcat ネイティブtomcat で APR を使用...

画像マーキー効果を実現するネイティブJS

今日は、ネイティブ JS で実装された画像マーキー効果を紹介します。効果は次のとおりです。 実装され...

Vue バッチ更新 DOM 実装手順

目次シーン紹介深い応答性トリガーゲッターDep.targetを探すゲッターセッター要約するシーン紹介...

SSHのssh-keygenコマンドの基本的な使い方の詳細な説明

SSH 公開鍵認証は、SSH 認証方式の 1 つです。 SSH パスワードフリーのログインは公開鍵認...

MySQL最適化ソリューション: スロークエリログを有効にする

目次序文スロークエリログの設定テスト付録: ログ解析ツール mysqldumpslow要約する序文こ...

CSS Houdini でダイナミックな波効果を実現

CSS Houdini は、CSS 分野における最もエキサイティングなイノベーションとして知られてい...