写在前面
心慕Vue源码许久,目前面试也属于必考内容。网上虽教程许多,但都是一通代码罗列,不够全局。且别人所分享终为他物,不可为我所用。故开此专题,用作学习记录所用,也希望能与更多的人分享、交流。
准备工作
首先将Vue的源码clone一份到本地,git地址为:
https://github.com/vuejs/vue.git
先从全局来看一下源码的整体架构(个人分析,可能有不准确的地方,有错误请指正)
源码入口及Vue构造函数
读源码可以从项目的package.json入手,package.json中找到build命令,得到此项目的构建文件,通过对该文件的分析,以此找到相应的项目文件。
从构建函数寻找入口文件
我们从Vue的package.json中可知,Vue通过script目录下的build.js进行构建。
目光转到build,js,它里面主要做了什么呢?
让我们来看看script/config.js中有什么
寻找Vue构造函数
接下来马上就能找到源码啦,我们看一下web/entry-runtime-with-compiler.js吧!
让我们继续找web/runtime/index.js这个文件
那就再康康core/index.js
继续,core/instance/index
我们历经艰难,终于找到了Vue的构造函数,迈出了Vue源码阅读的第一步。接下来,我们来分析Vue的初始化过程
写在最后
其实开始这个系列我这个菜鸡心里还是非常纠结的,一是怕个人功力不够,无法将Vue2源码的魅力展现出来; 另一方面也是怕自己坚持不下来。但万事开头难,我会尽自己最大努力去将内容做的更好。也欢迎各位对源码理解更深刻的大佬能对我讲的不对或者不准确的地方进行指正。