vue绑定key的案例（输入框失焦问题）

之前做过这样的一个需求，就是输入框可动态增加或者减少的场景。通过v-for来遍历所有输入框，那么分析下面key几种情况：

为了演示，这里假设输入框的校验规则是允许字符数为1-5。

1.没有绑定key 或者 key绑定index的情况
如图所示，第二个输入框输入了6个字符，校验不通过，但是第三个输入框校验是通过的，但是当我们删除第二个输入框的时候，第三个输入框变为第二个输入框，本来校验通过的，现在反而不通过了。

分析：当dom发生变化的时候，vue进行dom进行的增删，借助vnode的key比较，第二个输入框绑定的key为2，第三个输入绑定的输入框为3，那么将第二个输入框删除后，第三个输入框变为第二个输入框，这时候vue删除key为3的节点，key为2的节点依旧存在，替换的仅仅是输入框的值，那么就会出现上面这种情况。

2.key绑定唯一值的情况
通过下面这个函数生成唯一值：

  uuid (index) {
   
     	 return `uuid-${
     index}-${
     Date.now()}-${
     Math.random().toFixed(2)}`;
  }

为了解决第一种情况出现，我们尝试将key绑定唯一值，但是出现另外一个bug。

如图所示，第一种情况的问题在这里确实能得到解决，但是每当我在输入框输入的时候，一输入一个字符就会出现失去焦点。
分析：每当值发生变化，vue就会重新渲染。因为我的key值是通过时间戳和随机数来生成，所以重新渲染的时候，节点的key肯定和上一次不一样，那么vue会将所有节点全部替换，所以出现失焦的情况。

3.key仍旧绑定唯一值的情况
将绑定的唯一key存起来，当输入后，重新渲染的时候，用上次的key，而不是重新新的key，这样就能解决第2种情况出现的问题