Vue 2.0 v-for 響應式key, index及item.id參數對v-bind:key值造成差異研究

Vue 2.0 v-for 響應式key, index及item.id參數對v-bind:key值造成差異研究

Vue 2.0 v-for 響應式key, index及item.id參數對v-bind:key值造成差異研究

在github上閱覽README.md以獲得最佳閱讀體驗，點這裏

v-for響應式key, index及item.id參數對v-bind:key值造成差異研究

實驗背景

通常情況下，我們渲染一個li列表，採用v-for指令進行渲染，我們需要給渲染的每一項元素綁定一個key值，其實綁定該key值是可選的，但會引起警告。使用v-for參數的過程中，由於v-for提供三個參數，分別是: value, key, index。對其哪一個作爲元素綁定key值更能得到我們想要的響應式渲染作出實驗。

實驗目的

總結出在採用不同參數作爲元素綁定key值時，出現的不同的渲染結果，得出最優渲染方案

實驗準備

我們準備第三個可以作爲綁定key值的變量，分別是:

• 渲染item自帶屬性id
• v-for提供的key
• v-for提供的index

我們制定一個參照表格

---

li綁定key值類型	id	index	key
實驗一	選取	x	x
實驗二	x	選取	x
實驗三	x	x	選取

---

實驗一

• li綁定key值爲自帶屬性id
• 分別控制兩個變量：改變id值，對li進行排序

實驗vue.js代碼

// items data
items: [
    {
        id: 2,
    },
    {
        id: 1,
    },
    {
        id: 3,
    },
    {
        id: 4,
    },
]

<!-- dom constructor -->
<template>
  <div class="content">
    <ul>
      <li class="animate">對照組</li>
      <li v-for="(item, key, index) in items" class="animate" v-bind:key="item.id">{{item.id}}</li>
      <!-- 當前綁定值爲item.id  -->
    </ul>
    </div>
  </div>
</template>

首先使用了item.id作爲綁定的key值，我們來看下效果：
渲染效果demo

1. 改變第一個元素的id值，第一個li元素重新渲染，其餘三個li元素與對照組速度始終保持一致，沒有變化，說明li元素單獨渲染
2. 爲了驗證1.觀點，我們對實驗組按照升序進行排列，查看DOM結構，當改變第一個元素位置時，第一個li元素重新渲染，其餘三個li元素不重新渲染且與對照組速度始終保持一致，說明第一個li元素單獨渲染，驗證1.結論

---

實驗二

• li綁定key值爲 v-for提供的index參數
• 分別控制兩個變量：改變id值，對li進行排序

實驗vue.js代碼

// items data
items: [
    {
        id: 2,
    },
    {
        id: 1,
    },
    {
        id: 3,
    },
    {
        id: 4,
    },
]

<!-- dom constructor -->
<template>
  <div class="content">
    <ul>
      <li class="animate">對照組</li>
      <li v-for="(item, key, index) in items" class="animate" v-bind:key="index">{{item.id}}</li>
      <!-- 當前綁定值爲index  -->
    </ul>
    </div>
  </div>
</template>

在實驗二中，使用v-for提供的index參數作爲綁定的key值，我們來看下效果：
渲染效果demo

1. 改變第一個元素的id值，第一個li元素與其餘三個li元素與對照組速度始終保持一致，沒有變化，說明綁定index值並未對li渲染造成影響
2. 爲了驗證1.觀點，我們對實驗組按照升序進行排列，查看DOM結構，當改變第一個元素位置時，第一個li元素重新渲染，其餘三個li元素也重新渲染均且與對照組速度始終保持一致，說明所有li元素均重新渲染，驗證1.結論

---

實驗三

• li綁定key值爲 v-for提供的key參數
• 分別控制兩個變量：改變id值，對li進行排序

實驗vue.js代碼

// items data
items: [
    {
        id: 2,
    },
    {
        id: 1,
    },
    {
        id: 3,
    },
    {
        id: 4,
    },
]

<!-- dom constructor -->
<template>
  <div class="content">
    <ul>
      <li class="animate">對照組</li>
      <li v-for="(item, key, index) in items" class="animate" v-bind:key="key">{{item.id}}</li>
      <!-- 當前綁定值爲key  -->
    </ul>
    </div>
  </div>
</template>

在實驗二中，使用v-for提供的key參數作爲綁定的key值，我們來看下效果：
渲染效果demo

1. 改變第一個元素的id值，第一個li元素與其餘三個li元素與對照組速度始終保持一致，沒有變化，說明綁定key值並未對li渲染造成影響
2. 爲了驗證1.觀點，我們對實驗組按照升序進行排列，查看DOM結構，當改變第一個元素位置時，第一個li元素重新渲染，其餘三個li元素也重新渲染均且與對照組速度始終保持一致，說明所有li元素均重新渲染，驗證1.結論

---

實驗結論

經過三次對照實驗（我們的實驗採用了控制變量法，對照實驗法進行），我們可以得出結論：使用v-for渲染元素時，使用元素自身的id屬性去指定渲染元素的key值有利於單個元素的重新渲染，若採用其他如v-for提供的index, key等值，在改變渲染出來的DOM結構時，會觸發所有元素的重新渲染，當數據過大時，可能會造成性能負擔。

總結

當我們在使用v-for進行渲染時，儘可能使用渲染元素自身屬性的id給渲染的元素綁定一個key值，這樣在當前渲染元素的DOM結構發生變化時，能夠單獨響應該元素而不觸發所有元素的渲染。

研究成員

TimRChen
libook