遇到的问题

在使用Vue渲染“可删减”的列表时，错误的使用index作为key，导致列表视图出现错乱。

为什么cat变成了dog，但是<input />里的1没有变成2呢？

这个问题一下子很难解释，下面我们通过几个小问题，一步一步来分析。

如果我们使用正确的值做为key，那么这个问题其实根本就没有意义。但是，如果我们参透了其中的出错原因，这将给我们带来极大的提升。

为什么会触发组件update

你会发现，删除第一行后，watch和updated钩子都执行了，这个结果其实给了我们第一个提示：

删除第一行这句话本质上其实是：删除vue实例数据中list的第一项，并不是删除dom的第一个节点！

对于在dom中的这三个节点，其实是做了如下的变化：

之所以会这种方式进行dom更新，这决定于vdom的diff算法，我们通过阅读vue源码中src/core/vdom/patch.js这个文件来一探究竟。具体的来说，就是其中的updateChildren方法：

不要被这么多变量吓到，其实主要是三组变量，每组四个：

在我们的例子里，大概是这样：

继续往下看：

又是一坨代码，但也不要被吓到，你会发现if、else if里的逻辑都是差不多的，仔细读两遍，你就会发现其实大概就是：

空节点跳过处理
指针1对应的vnode跟指针3对应的node比，如果是same的就patchVnode进行更新，如果不是same的就往下走
指针2对应的vnode跟指针4对应的node比，如果是same的就patchVnode进行更新，如果不是same的就往下走
指针1对应的vnode跟指针4对应的node比，如果是same的就patchVnode进行更新，如果不是same的就往下走
指针2对应的vnode跟指针3对应的node比，如果是same的就patchVnode进行更新，如果不是same的就往下走
最终，如果到了这一步还不是same的，那就用key最终确认一次
1. 先构造一个key to index的map
2. 判断当前old vnode的key是否在map里
3. 如果不在，就直接createElm
4. 如果在，并且是same的，那就patchVnode，然后更新节点内容、顺序
5. 如果在，但是不是same的，那就视作新element，执行createElm
当while循环退出时，如果指针1和指针2还没重合，那就代表此时指针1和指针2区域内的vnode是待删除的，所以直接removeVnodes。而如果是指针3和指针4还没重合，那就代表指针3和指针4之间的vnode是待添加的，所以直接addVnodes。至此整个过程结束。