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