diff和key的作用

 key的作用主要是为了高效的更新虚拟DOM，在新旧的虚拟dom对比时，可以通过key可以精准判断两个节点是否是同一个，从而避免频繁更新不同元素，使整个比较的过程更加高效，减少DOM操作量，提高性能；

diff算法

• 比较只会在同层级进行, 不会跨层级比较
• 在diff比较的过程中，循环从两边向中间比较

当页面数据发生变化时，vue会生成新的vnode并且提取出旧的vnode，分别给双方加上首尾指针，新的vnode为newStart和newEnd分别指向他的首尾节点，旧的vnode为oldStart和oldEnd也分别指向他的首尾节点

比较时，会优先拿oldStart<—>newStart，oldStart<—>newEnd，oldEnd<—>newStart，oldEnd<—>newEnd 两两进行对比；如果两者相同的话上，那么会将旧节点对应的真实dom移到新节点的位置上，并且双方将匹配上了的指针往中间移动；如果上述4种对比都失败的话，如果当前没有存在key，就会使用真实dom会在newStart位置直接新增节点，newStart向后移；存在key的话，那么去旧的vnode的映射表中查找，如果没有的话真实dom会在newStart位置直接新增节点，有的话则会对比两者的内容是否有区别，没区别的话，那么会将旧节点对应的真实dom移到新节点的位置上；

当oldStart > oldEnd 或者 newStart > newEnd时，比较完成；

比较完成后，如果newStart <= newEnd，那么代表 newStart 和 newEnd之间的节点为新增节点。那么真实dom会在当前newStart 和newEnd之间新增对应的节点；如果是oldStart > oldEnd，则代表两者中间之间的节点被删除了，此时真实dom删除这些节点；