Vue3 key 属性

Vue3 内置属性Vue3 組み込み属性

key属性は Vue 仮想 DOM アルゴリズムの重要な特別な属性であり、主に Vue が各ノードの一意性を識別するのを助け、効率的に仮想 DOM を更新するために使用されます。

基本説明

key属性は Vue コンポーネントまたは要素に一意の識別子を提供するために使用されます。リストレンダリングでは、各v-forループ内の要素は一意のkey属性を持つ必要があります。

  • 型: String | Number
  • 役割: リストレンダリングで各要素に一意の識別子を提供し、Vue が効率的に diff して DOM ノードを再利用するのを助けます。

動作原理

Vue が仮想 DOM の diff を行うとき、key がkeyない場合、Vue は要素の移動を最小限に抑えるアルゴリズムを採用し、可能な限り同じタイプの要素をその場で再利用します。key がkeyあると、Vue は key の順序の変化に応じて要素を並べ替え、存在しなくなった key の要素を削除します。

同じ親要素の子要素は一意の key を持つ必要があります。重複した key はレンダリングエラーを引き起こします。

基本的な使い方

最も一般的な使い方は、v-forv-for と組み合わせて使用することです：

例

<ul>
  <li v-for="item in items" :key="item.id">
    {{ item.name }}
  </li>
</ul>

使用シーン

1、リストレンダリング

にv-forで key を使用するkeyのが最も一般的なシーンです：

例

<template>
  <div>
    <div v-for="user in users" :key="user.id" :style="{ marginBottom: '10px' }">
      <span>{{ user.id }}</span> -
      <span>{{ user.name }}</span> -
      <span>{{ user.email }}</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      users: [
{ id: 1, name: '张三', email: '[email protected]' },
{ id: 2, name: '李四', email: '[email protected]' },
{ id: 3, name: '王五', email: '[email protected]' }
      ]
    }
  }
}
</script>

2、要素の強制置き換え

key要素またはコンポーネントを再利用するのではなく、強制的に置き換えるためにも使用できます。これは以下のようなシーンで役立ちます：

  • コンポーネントのライフサイクルフックを正しくトリガーする
  • トランジションアニメーションをトリガーする

例

<template>
  <div>
    <input v-model="text" placeholder=入力内容 />
    <transition>
      <span :key="text">{{ text }}</span>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: ''
    }
  }
}
</script>

当 textが変化すると、<span>要素は再利用されずに置き換えられるため、トランジション効果が発動します。

注意事項

key は一意で安定している必要があります：key の値はデータの変化に応じて変わってはいけません。そうしないと、Vue のパフォーマンスと仮想 DOM の再利用戦略に影響を与えます。

インデックスを key として使用することは避けてください：リスト項目の順序が変わらないことが明確にわかっている場合を除きます。インデックスは位置に基づいているため、リストの順序が変わると key も変わり、Vue が DOM ノードを正しく再利用できなくなります。

例

<!-- 非推奨：インデックスを key として使用（リストの順序が変わる場合） -->
<li v-for="(item, index) in items" :key="index">{{ item.name }}</li>

<!-- 推奨：一意の ID を key として使用 -->
<li v-for="item in items" :key="item.id">{{ item.name }}</li>

v-for との併用

keyとv-for併用する場合、以下のようないくつかの構文があります：

例

<!-- 配列の反復処理 -->
<li v-for="item in items" :key="item.id">{{ item.name }}</li>

<!-- インデックス付きの反復処理 -->
<li v-for="(item, index) in items" :key="index">{{ index }} - {{ item.name }}</li>

<!-- オブジェクトの反復処理 -->
<li v-for="(value, key, index) in object" :key="key">
  {{ index }}. {{ key }}: {{ value }}
</li>

<!-- 数値の反復処理 -->
<span v-for="n in 5" :key="n">{{ n }}</span>

Vue3 内置属性Vue3 組み込み属性

その他の拡張機能