三个系统解析Vue源码的好资料(持续更新..)

363 阅读2分钟

遵循惯例,还是先抛几个问题:

  1. Vue运行实例中存在几棵树,或者说存在几个树形结构,例如有Dom树,当然因为Vue使用的是虚拟dom,也存在一个vnode树型结构,除了这两棵树之外,还有其他树吗?
  2. Vue中的这几个树形结构的关系是什么?是怎么关联起来的?
  3. 在一个有很多组件和大量vnode的Vue实例中,如何评估测量性能,例如,只更新最高层组件的一个很小的变量,会影响到那些vonde的diff?
  4. Vue的slot的机制和原理是什么,比较一下Vue Slot机制和Web Component的机制原理。

下面的这三个资料可以回答上面的这几个问题。

Vue 技术内幕:

Vue 技术内幕:hcysun.me/vue-design/

Vue 技术揭秘:

Vue 技术揭秘:ustbhuangyi.github.io/vue-analysi…

Vue 源码学习:

Vue 源码学习:blog.windstone.cc/vue/source-…


上述三个源码解析各有特点:


Vue 技术内幕写的最详细,作者说逐行解析,确实是这样的,好多细节都是独家提供,遗憾的是,内容不是很全,没有详细地说明组件化,Vue的一些难点,例如slot的机制都没有描述。

Vue技术揭秘的作者是Vue届的大佬,写的很早,有配套的视频课程,内容很全,Vue 中所有的点都有涉及,个人感觉的不足之处是写的不是很详细。

上述两个源码解析的资料应该是知名度最高的,都值得学一遍。

个人感觉最被低估的是第三个学习资料Vue 源码学习,可能我孤陋寡闻,从github上的star数量来看,知名度不高,不过内容写的真的很棒。

持续更新中。。