每次在对元素进行移动的时候，我们可以发现一个规律，如果想要移动的次数最少，就意味着需要有一部分元素是稳定不动的，那么究竟能够保持稳定不动的元素有一些什么规律呢？
可以看一下上面这个例子：c h d e VS d e i c，在比对的时候，凭着肉眼可以看出只需要将 c 进行移动到最后，然后卸载 h，新增 i 就好了。d e 可以保持不动，可以发现 d e 在新老节点中的顺序都是不变的，d 在 e 的后面，下标处于递增状态。
这里引入一个概念，叫最长递增子序列。
官方解释：在一个给定的数组中，找到一组递增的数值，并且长度尽可能的大。
有点比较难理解，那来看具体例子：
const arr = [10, 9, 2, 5, 3, 7, 101, 18]
=> [2, 3, 7, 18]
这一列数组就是arr的最长递增子序列，其实[2, 3, 7, 101]也是。
所以最长递增子序列符合三个要求：
1、子序列内的数值是递增的
2、子序列内数值的下标在原数组中是递增的
3、这个子序列是能够找到的最长的
但是我们一般会找到数值较小的那一组数列，因为他们可以增长的空间会更多。
那接下来的思路是：如果能找到老节点在新节点序列中顺序不变的节点们，就知道，哪一些节点不需要移动，然后只需要把不在这里的节点插入进来就可以了。因为最后要呈现出来的顺序是新节点的顺序，移动是只要老节点移动，所以只要老节点保持最长顺序不变，通过移动个别节点，就能够跟它保持一致。 所以在此之前，先把所有节点都找到，再找对应的序列。最后其实要得到的则是这一个数组：[2, 3, 新增 , 0]。其实这就是 diff 移动的思路了
使用 index 做 key，破坏顺序操作的时候， 因为每一个节点都找不到对应的 key，导致部分节点不能复用,所有的新 vnode 都需要重新创建。
例子：
<template> <div> <ul> <li v-for="(item,index) in studentList" :key="index">{{item.name}}</li> <br> <button @click="addStudent">添加一条数据</button> </ul> </div> </template> <script> export default { name: 'HelloWorld', data() { return { studentList: [ { id: 1, name: '张三', age: 18 }, { id: 2, name: '李四', age: 19 }, ], }; }, methods:{ addStudent(){ const studentObj = { id: 3, name: '王五', age: 20 }; this.studentList=[studentObj,...this.studentList] } } } </script>
我们先把 Chorme 调试器打开，我们双击把里面文本修改一下
我们运行以上上面的代码，看下运行结果
从上面运行结果可以看出来，我们只是添加了一条数据，但是三条数据都需要重新渲染是不是很惊奇，我明明只是插入了一条数据，怎么三条数据都要重新渲染？而我想要的只是新增的那一条数据新渲染出来就行了。
上面我们也讲过 diff 比较方式,下面根据 diff 比较绘制一张图，看看具体是怎么比较的吧
当我们在前面加了一条数据时 index 顺序就会被打断，导致新节点 key 全部都改变了，所以导致我们页面上的数据都被重新渲染了。
下面我们下面生成 1000 个 DOM 来比较一下采用 index ，和不采用 index 性能比较，为了保证 key 的唯一性我们采用 uuid 作为 key
我们用 index 做为 key 先执行一遍
<template> <div> <ul> <button @click="addStudent">添加一条数据</button> <br> <li v-for="(item,index) in studentList" :key="index">{{item.id}}</li> </ul> </div> </template> <script> import uuidv1 from 'uuid/v1' export default { name: 'HelloWorld', data() { return { studentList: [{id:uuidv1()}], }; }, created(){ for (let i = 0; i < 1000; i++) { this.studentList.push({ id: uuidv1(), }); } }, beforeUpdate(){ console.time('for'); }, updated(){ console.timeEnd('for')//for: 75.259033203125 ms }, methods:{ addStudent(){ const studentObj = { id: uuidv1() }; this.studentList=[studentObj,...this.studentList] } } } </script>
换成 id 作为 key