前言

在vue中使用v-for时需要，都会提示或要求使用  :key，有的的开发者会直接使用数组的 index 作为 key 的值，但不建议直接使用 index作为 key 的值，有时我们面试时也会遇到面试官问：为什么不推荐使用 index 作为 key ？接下来和小颖一起来瞅瞅吧

为什么要有 key

官网解释

当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。这个类似 Vue 1.x 的 track-by="$index"。

这个默认的模式是高效的，但是只适用于不依赖子组件状态或临时 DOM 状态 (例如：表单输入值) 的列表渲染输出。

为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key attribute：

key的作用

官网解释：key

预期：number | string | boolean (2.4.2 新增) | symbol (2.5.12 新增)

key 的特殊 attribute 主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。而使用 key 时，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。

有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。

通俗解释：

key 在 diff 算法的作用，就是用来判断是否是同一个节点。

Vue 中使用虚拟 dom 且根据 diff 算法进行新旧 DOM 对比，从而更新真实 dom ，key 是虚拟 DOM 对象的唯一标识, 在 diff 算法中 key 起着极其重要的作用，key可以管理可复用的元素，减少不必要的元素的重新渲染,也要让必要的元素能够重新渲染。

为什么key 值不建议用index？

性能消耗

使用 index 做 key，破坏顺序操作的时候， 因为每一个节点都找不到对应的 key，导致部分节点不能复用,所有的新 vnode 都需要重新创建。

示例：

<template>
  <div class="hello">
    <ul>
      <li v-for="(item,index) in studentList" :key="index">{{ item.name }}</li>
    </ul>
    <br>
    <button @click="addStudent">添加一条数据</button>
  </div>
</template>

<script>
export default {
  name: 'ceshi',
  data() {
    return {
      studentList: [
        {id: 1, name: '张三', age: 18},
        {id: 2, name: '李四', age: 19},
        {id: 3, name: '王麻子', age: 20},
      ],
    };
  },
  methods: {
    addStudent() {
      const studentObj = {id: 4, name: '王五', age: 20};
      this.studentList = [studentObj, ...this.studentList]
    }
  }
}
</script>

打开浏览器的开发工具，修改数据的文本，后面加上 “-我没变”，点击添加一条数据   按钮，则发现dom整体都变了

 当给key绑定唯一不重复的值时：

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

打开浏览器的开发工具，修改数据的文本，后面加上 “-我没变”，点击添加一条数据   按钮，则发现只是顶部多了一条，其他dom没有重新渲染。

当用index做key时，当我们在前面加了一条数据时 index 顺序就会被打断，导致新节点 key 全部都改变了，所以导致我们页面上的数据都被重新渲染了。而用了不会重复的唯一标识id时，diff算法比较后发现只有头部有变化，其他没有变，则只给头部新增了一个元素。从上面比较可以看出，用唯一值作为 key 可以节约开销这样大家应该就明白了吧·················

参考：在 Vue 中为什么不推荐用 index 做 key

数据错位

示例：

<template>
  <div class="hello">
    <ul>
      <li v-for="item in studentList" :key="item.id">{{ item.name }}<input /></li>
    </ul>
    <br>
    <button @click="addStudent">添加一条数据</button>
  </div>
</template>

<script>
export default {
  name: 'ceshi',
  data() {
    return {
      studentList: [
        {id: 1, name: '张三', age: 18},
        {id: 2, name: '李四', age: 19}
      ],
    };
  },
  methods: {
    addStudent() {
      const studentObj = {id: 4, name: '王五', age: 20};
      this.studentList = [studentObj, ...this.studentList]
    }
  }
}
</script>

我们往 input 里面输入一些值，添加一位同学看下效果：

 这时候我们就会发现，在添加之前输入的数据错位了。添加之后王五的输入框残留着张三的信息，这很显然不是我们想要的结果。

 从上面比对可以看出来这时因为采用 index 作为 key 时，当在比较时，发现虽然文本值变了，但是当继续向下比较时发现  DOM 节点还是和原来一摸一样，就复用了，但是没想到 input 输入框残留输入的值，这时候就会出现输入的值出现错位的情况

当我们将key绑定为唯一标识id时，如图所示。key 相同的节点都做到了复用。起到了diff 算法的真正作用。

 总结：

相关内容

 为什么要提出虚拟DOM

虚拟DOM是什么

      Vue.js通过编译将模版转换成渲染函数(render)，执行渲染函数就可以得到一个以vnode节点(JavaScript对象)作为基础的树形结构，vnode节点里面包含标签名(tag)、属性(attrs)和子元素对象(children)等等属性，这个树形结构就是Virtual DOM，简单来说，可以把Virtual DOM理解为一个树形结构的JS对象。

参考： 浅谈Vue中的虚拟DOM

简而言之  虚拟DON就是javascript对象，通过对虚拟 DOM进行diff，算出最小差异，然后更新真实的DOM。

虚拟DOM的优势

1. 提供一种方便的工具，使得开发效率得到保证
2. 保证最小化的DOM操作，使得执行效率得到保证
3. 具备跨平台的优势 由于 Virtual DOM 是以 JavaScript 对象为基础而不依赖真实平台环境，所以使它具有了跨平台的能力，比如说浏览器平台、Weex、Node 等。
4. 提升渲染性能 Virtual DOM的优势不在于单次的操作，而是在大量、频繁的数据更新下，能够对视图进行合理、高效的更新

参考：vue 中虚拟dom的理解、浅谈Vue中的虚拟DOM

为什么虚拟DOM可以提高渲染速度

1. 根据虚拟dom树最初渲染成真实dom
2. 当数据变化，或者说是页面需要重新渲染的时候，会重新生成一个新的完整的虚拟dom
3. 拿新的虚拟dom来和旧的虚拟dom做对比（使用diff算法）。得到需要更新的地方之后，从而只对发生了变化的节点进行更新操作。

如果大家不太明白的话，我们来看个示例

<template>
  <div class="hello">
    <ul>
      <li v-for="(item,index) in studentList" :key="item.id" @click="changeName(index)">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'ceshi',
  data() {
    return {
      studentList: [
        {id: 1, name: '张三', age: 18},
        {id: 2, name: '李四', age: 19},
        {id: 3, name: '王麻子', age: 20},
      ],
    };
  },
  methods: {
    changeName(index) {
      this.studentList[index].name = '我变啦'
    }
  }
}
</script>

上面的修改数组值得方式 仅在 2.2.0+ 版本中支持 Array + index 用法。

如果使用之前的则使用    Vue.set( target, propertyName/index, value )

运行后，我们打开开发者工具，然后手动修改页面的文本，给每个后面加  “-我没变” 

 然后随便点击其中一个，我们会发现只有点击那个文本变了，并且只是它的文本内容变了，dom并没有整体变。

vue中是如何实现模板转换成视图的

参考： 浅谈Vue中的虚拟DOM

简单来说就是：通过编译将模版转换成渲染函数(render)，执行渲染函数就可以得到一个以vnode节点(JavaScript对象)作为基础的树形结构（虚拟dom），当数据发生变化虚拟dm通过diff算法找出新树和旧树的不同，记录两棵树差异根据差异应用到所构建的真正的DOM树上，视图就更新。

diff算法

 虚拟DOM中，在DOM的状态发生变化时，虚拟DOM会进行Diff运算，来更新只需要被替换的DOM，而不是全部重绘。 在Diff算法中，只平层的比较前后两棵DOM树的节点，没有进行深度的遍历。

规则

同层比较,如上面div的Old Vnode，跟其Vnode比较，div只会跟同层div比较，不会跟p进行比较，下面是示例图:

流程图

当数据发生改变时，set方法会让调用Dep.notify通知所有订阅者Watcher，订阅者就会调用patch给真实的DOM打补丁，更新相应的视图。

 具体分析

patch

 来看看patch是怎么打补丁的（代码只保留核心部分）

function patch (oldVnode, vnode) {
    // some code
    if (sameVnode(oldVnode, vnode)) {
        patchVnode(oldVnode, vnode)
    } else {
        const oEl = oldVnode.el // 当前oldVnode对应的真实元素节点
        let parentEle = api.parentNode(oEl)  // 父元素
        createEle(vnode)  // 根据Vnode生成新元素
        if (parentEle !== null) {
            api.insertBefore(parentEle, vnode.el, api.nextSibling(oEl)) // 将新元素添加进父元素
            api.removeChild(parentEle, oldVnode.el)  // 移除以前的旧元素节点
            oldVnode = null
        }
    }
    // some code 
    return vnode
}

patch函数接收两个参数oldVnode和Vnode分别代表新的节点和之前的旧节点

• 判断两节点是否值得比较，值得比较则执行patchVnode

  function sameVnode (a, b) {
    return (
      a.key === b.key &&  // key值
      a.tag === b.tag &&  // 标签名
      a.isComment === b.isComment &&  // 是否为注释节点
      // 是否都定义了data，data包含一些具体信息，例如onclick , style
      isDef(a.data) === isDef(b.data) &&  
      sameInputType(a, b) // 当标签是<input>的时候，type必须相同
    )
  }

• 不值得比较则用Vnode替换oldVnode

patchVnode (oldVnode, vnode) {
    const el = vnode.el = oldVnode.el
    let i, oldCh = oldVnode.children, ch = vnode.children
    if (oldVnode === vnode) return
    if (oldVnode.text !== null && vnode.text !== null && oldVnode.text !== vnode.text) {
        api.setTextContent(el, vnode.text)
    }else {
        updateEle(el, vnode, oldVnode)
        if (oldCh && ch && oldCh !== ch) {
            updateChildren(el, oldCh, ch)
        }else if (ch){
            createEle(vnode) //create el's children dom
        }else if (oldCh){
            api.removeChildren(el)
        }
    }
}