上面updateChildren()源码其实还有一个考点:vue中key的作用 , 或是说v-for的时候为什么推荐写上key?在#495中 , 有一个createKeyToOldIdx(),这个方法是创建key=>index的map映射,源码定义在https://github.com/vuejs/vue/blob/v2.7.10/src/core/vdom/patch.ts#L56 , 对于新节点,可以看到如果没有key值得话,它会通过findIdxInOld()遍历旧的节点,而有key值的话,它会直接从map结构中取到对应的节点数据,相对于遍历 , map结构明显会更有效率 。
对于core文件夹下的源码就分析到这里,完结 。
最后说点题外话,这篇文章躺在我的随笔列表里好久了,其实一年半前就开始写这篇文章了,一直缝缝补补,还好现在是写完了 。一是因为确实东西很多 , 不知道从何写起,原本我打算写的是src下所有的文件夹的主要源码分析,现在看来光是这src/core文件夹下的主要源码就花了这么长的时间,当然有一部分原因是我比较懒,至于其他文件夹下的源码 , 如果以后有时间可能会新开文章写;二是当时写的时候是以main分支源码为基础的写的,但是vue2.x还是有一直更新的,刚开始写的时候vue版本还在v2.6.10+ , 现在最新版本都到v2.7.10了,更没想到vue2.x也会投入ts的怀抱 , 这就导致了之前写的文章里的源码与所在链接和行数是不对应的,有种错乱的感觉 , 所以这次我将v2.7.10作为版本快照固定下来 , 在最新的tag上进行源码分析,放上对应的源码链接 。三就是我前几个月不是有一段面试经历,加入了一点我面试中经常遇到和vue相关的问题,即考点,希望能帮助大家更好的理解源码在实战中的应用 。
推荐阅读
- Ruoyi字典源码学习
- 【Spring boot】启动过程源码分析
- 八 Netty 学习:新连接接入源码说明
- 深入底层C源码 Redis核心设计原理
- 七 Netty 学习:NioEventLoop 对应线程的创建和启动源码说明
- ERP 系统的核心是什么?有什么作用?
- Spring mvc源码分析系列--Servlet的前世今生
- spring cron表达式源码分析
- 集合框架——LinkedList集合源码分析
- 含源码 手把手教你使用LabVIEW OpenCV DNN实现手写数字识别