关于Vue的key

在理解key之前，需要先理解Vue的diff算法

通过订阅-观察模式，在数据发生变化时，会调用Dep.notify通知所有订阅者Watcher，订阅者就会调用patch方法给真实的DOM打补丁，更新相应的视图。

而patch方法则是通过diff算法进行新旧虚拟DOM的比较，发现有不一样的地方就直接修改在真实的DOM上，然后使oldVnode的值为Vnode。

回到key上，当diff算法进行新旧虚拟DOM对比时，若带了key, 则会根据key对新旧节点进行比对，相同就复用，不相同，就删除旧的创建新的

是否使用唯一key

• 无状态列表渲染

  官网推荐的，使用key，应该要理解为“使用唯一key”。

  因为对于列表渲染，若是使用index作为key，那么其实和不使用key的效果是一样的

  若不带key，在判断samVnode时，由于key都是undefined，所以会判断为相同节点，那么该节点就会进行复用

  若index作为key，由于每个列表项的index在变更前后都是一样的，所以也会判断为相同节点

  若判断为相同节点，那么只需修改节点的文本内容，而不需要删除、创建节点，可以提高渲染性能

  所以，在这种情况下，不带唯一key的性能会更好

• 带状态的组件渲染

  对于无状态列表渲染，可以使用index作为key，复用节点，提高性能

  但是，对于有状态的组件，则需要使用唯一key，进行标识，以确保组件状态的正确

  比如：列表1和列表2，可通过tab进行切换

  在列表1下，勾选了第二项，切换到列表2，若不带唯一key，那么列表2的第二项也会是勾选状态，因为组件复用了，保留了之前的状态

  此时，需要为列表项带上唯一key，每次渲染都会替换节点，保证状态的正确

总结

key的作用就是更新节点时，判断新旧节点是否相同，相同则复用，不同则删除旧节点，创建新节点

当渲染无状态列表时，使用index作为key，与不使用key，效果相同，节点都会进行复用，只修改文本内容

当渲染带状态列表时，需要带上唯一key，确保状态正确