在上文中，编写的Vue的双向数据绑定的demo中是通过Compile来完成模板到真实Dom节点的转换。其中使用document.createDocumentFragment()来创建一个文档碎片，即存在内存中的Dom节点。当时我们只是做了一个简单的处理。但是Vue实际的编译比这…

你盼世界，我盼望你无bug。Hello 大家好！我是霖呆呆。 在接下来日子，我们每周都会为大家输出好玩、有趣、符合前端发展的技术型文章，这个过程我们一起学习进步💪。如果觉得某位小哥哥/小姐姐写的不错的话，还请不要吝啬你的赞👍哦，每个赞和评论都是对我们最好的支持😊，感谢。 …

目标是写一个非常详细的关于diff的干货，所以本文有点长。也会用到大量的图片以及代码举例，一起来get吧。 先来了解几个点... 1. 当数据发生变化时，vue是怎么更新节点的？ 要知道渲染真实DOM的开销是很大的，比如有时候我们修改了某个数据，如果直接渲染到真实dom上会引起…

所以从这里可以知道：key可以为vue dom diff提供辅助方法，让其快速定位是否为同一个元素，且要保证其唯一性。所以在循环中给元素的key复制最佳实践是：元素的唯一标识：id或者其他属性，而不是列表的index。使用index只会适得其反 2.在key Map中找到new…