三、vue中key的作用和工作原理吗?说说你对它的理解。

[liwen327]

key的作用是在diff算法时更快的找到对应的结点，提高diff速度，以此来提高渲染的速度。
工作原理：
在新老两组Vnode的左右头尾两侧都有一个标记（即indexKey），在遍历过程中这几个变量都会向中间靠拢，当oldStartIndex > oldEndIndex或newStartIndex > newEndIndex时结束循环。
1、新老两组Vnode会找相同的key，如果key相同，如果新的开始节点和老的开始节点或新的结束节点和老的结束节点相同，则直接在该节点上进行patchVnode即可，不需要再遍历就完成了一次循环。
2、如果新的开始节点与旧的结束节点的key相同，则说明旧的开始节点已经到旧的结束节点后面去了，进行patchVnode的同时还需要把真实的dom节点移到旧的结束节点的后面。
3、如果旧的结束点与新的开始节点key相同，则说明旧的结束节点到了旧的开始节点的前面了，进行patchVnode的同时还需要把真实的dom节点移到旧的开始节点的前面。
4、如果以上三种情况都不符合，则在oldVnode中找与newStartVnode相同的Vnode，若存在则执行patchVnode，同时将该节点对应的dom移到oldStartVnode对应的dom的前面。