vue2源码分析,vue源码揭秘

文章目录 前言1vue 项目构建的时候通过package.json文件看到构建入口2 构建入口页面导入同级模块config的getAllbuilds方法3 通过传入参数中的builds对象使用map获取4 通过builds对象过滤后拿到了引入vue的文件5 通过第4步找到下一个导出vue的文件6 通过第5步找到下一个导出vue的文件7 通过第6步找到下一个导出vue的文件8 通过第7步找到下一个导出vue的文件(9) 最终发现Vue其实是个函数总结

前言

vue源码是基于rollup构建的rollup是一个轻量级构建工具非常适合js库的源码构建因为它只编译js。

1vue 项目构建的时候通过package.json文件看到构建入口

路径vue\package.json

2 构建入口页面导入同级模块config的getAllbuilds方法

路径vue\scripts\build.js

3 通过传入参数中的builds对象使用map获取

builds中拿到所有的配置然后通过命令行参数过滤掉不需要的配置最后将入口配置返回到build.js中并调用build方法进行构建。

路径scripts\config.js

4 通过builds对象过滤后拿到了引入vue的文件

路径vue\src\platforms\web\entry-runtime-with-compiler.ts

5 通过第4步找到下一个导出vue的文件

路径vue\src\platforms\web\runtime-with-compiler.ts
注意点这里挂载了$mounted方法

6 通过第5步找到下一个导出vue的文件

路径vue\src\core\index.ts

7 通过第6步找到下一个导出vue的文件

路径vue\src\core\index.ts

8 通过第7步找到下一个导出vue的文件

路径vue\src\core\instance\index.ts

(9) 最终发现Vue其实是个函数

问题为什么这里使用的es5的方法而不是 es6 的 class
原因如下图第8步中的initMixin等方法路径vue\src\core\instance\init.ts都是放到原型上的将vue的原型拆分成多个文件不同的逻辑按照代码的逻辑组织关系有利于维护代码。

总结