vue源码解析一

　　之前说了一下Vue的大概原理，我们自己也来实现了一个，下面我们实际看看Vue的源码；版本：2.x

 

1.回顾自己实现的Vue原理　　

　　我们自己实现的vue的基本原理，分为两个部分，第一部分初始化：通过Oberver给data中每个属性添加get/set方法，在get方法中添加注册Watcher的逻辑，在set方法中添加notify的逻辑；然后编译那些html标签，丢到虚拟节点树中，并且根据节点类型创建不同的Watcher（注意，创建Watcher时候传入的回调函数是用于覆盖该节点中占位符的值）；

　　第二部分：初始化之后，用户使页面上的数据发生变化，触发set方法，set方法中会触发notify方法，然后就调用所有的Watcher的update方法，进而调用每个Watcher的回调函数，覆盖节点的值，刷新页面数据；

　　这个就是Vue的乞丐版了，弄懂了前面几篇文章，再看下图就比较容易了；

 

2.查看Vue源码的准备工作

　　看源码首先我们要知道Vue的源码到底是什么？不会还有人以为看Vue的源码就是直接看那个vue.js文件吧.....

　　那个js文件几万行，什么神人才能直接编写这种js文件啊？

　　在我们自己写项目的时候的js文件比较小，直接引入就好了，但是当js文件太大的时候，我们就需要使用一个项目来进行管理了，具体的流程就类似下图所示。

　　其中rollup是比webpack更轻量级的插件，只会对js进行构建

 

　　

　　所以我们看的源码就是在github那里，下载就好：Vue源码 ，下载之后目录：

 

　　提前知道一个东西，js的一个比较大的问题就是没有类型检查，于是有了js的超集Typescript，简称ts，在ts中是支持类型检查和类型推断的；

　　flow和ts看起来用法几乎差不多，Vue2.x使用到了flow(当然，3.x就引入了ts了)，有兴趣的可以去看看，写法类似下面这种，就是加了变量类型声明而已，用法和js一样的使用；

 

3.Vue源码编译流程

　　我们看到Vue源码的目录结构，应该能知道这是npm管理的，所以我们可以在package.json中找到相关的打包命令：

 

　　其实就是node去执行scripts/build.js文件，我们看看scripts/build.js文件：

 

　　然后我们看看scripts/config.js中，其实就是编译不同环境下的js文件，这点比较关键！

　　后面我们以web/entry-runtime-with-compiler.js入口文件分析创建Vue实例的过程；

 

 

4.Vue创建实例

　　我们以web/entry-runtime-with-compiler.js入口文件为例，经过了上面的对路径的各种切割映射，最后拼接的目录应该是：src/platforms/web/entry-runtime-with-compiler.js，我们打开这个js文件看看：

 

　　看看那个index.js，发现还要进入到core/index中看看

 

　　core/index文件中可以看到要去instance/index；

 

 

　　instance/index文件中：