React 或者 vue 为什么在列表组件中使用 key

先回答：

key的作用主要是为了 虚拟DOM 在执行 diff算法 时更快的找到对应的节点，提高diff速度，高效的更新 Virtual DOM;

key值采用index和id的区别？

const list 1 = [
  { id: 1, name; 'test1' },
  { id: 2, name; 'test2' },
  { id: 3, name; 'test3' }
]
// 向中间插入test4之后
const list2 = [
  { id: 1, name: "test1" },
  { id: 4, name: "test4 我是在最后添加的一条数据" },
  { id: 2, name: "test2" },
  { id: 3, name: "test3" }
];

• 使用index作为key

之前DOM	更新后的DOM
key:0 index: 0 name: test1	key:0 index: 0 name: test1
key:1 index: 1 name: test2	key:1 index: 2 name: test4 我是在最后添加的一条数据
key:2 index: 2 name: test3	key:1 index: 1 name: test2
	key:2 index: 2 name: test3

只插入了一条数据,但是三条数据都要重新渲染

• 使用id作为key

之前DOM	更新后的DOM
key:1 id: 1 name: test1	key:1 id: 1 name: test1
key:2 id: 2 name: test2	key:4 id: 4 name: test4 我是在最后添加的一条数据
key:3 id: 3 name: test3	key:2 id: 2 name: test2
	key:3 id: 3 name: test3

对比发现：只有一条数据变化了，就是id为4的数据，因此只新渲染这条数据，其他的复用之前的就可以了。

vue和react的Virtual DOM的Diff算法大致相同，其核心是基于两个简单的假设：

1. 两个相同的组件产生类似的DOM结构，不同的组件产生不同的DOM结构。
2. 同一层级的一组节点，他们可以通过唯一的id进行区分。

基于以上这两点假设，使得虚拟DOM的Diff算法的复杂度从O(n^3)降到了O(n)。

key的作用主要是为了高效的更新虚拟DOM