Vue源码之import Vue发生了什么(一)

时间:2024-04-13 18:09:10

在使用vue之前,通常会import Vue from ''vue'

那分析源码的第一步,看看import Vue这个过程到底发生了什么。

1. 首先,将vue源码从github中clone下来。然后在vue/src中查看源码,在 web 应用下,我们来分析 Runtime + Compiler 构建出来的 Vue.js,对应的源码路径是src/platforms/entry-runtime-with-compiler.js

在这个文件中可以看到,在Vue的原型上挂载了方法,如$mount

Vue源码之import Vue发生了什么(一)文文件的最后,导出Vue

Vue源码之import Vue发生了什么(一)

2.继续向上一层,Vue是通过import Vue from './runtime/index'而来,

Vue源码之import Vue发生了什么(一)

在这一层可以看到,Vue中进行了一些全局config的配置,同时在原型上挂载了一些方法,如__patch__,$mount等

3.继续向上一层,Vue是通过import Vue from 'core/index'而来

Vue源码之import Vue发生了什么(一)

可以看到,在这一层,Vue主要通过initGlobalAPI完成了全局API的初始化

4.再上一层,Vue来自‘./instance/index.js’

Vue源码之import Vue发生了什么(一)

在这里可以看到,Vue的定义是一个函数。定义成一个函数而不是一个类的好处是可以像Vue作者一样将各个模块分块,通过在原型上挂载等完成各个模块的功能。这样更容易维护,同时结构也更清晰,如果使用ES6的class,不易写出结构清晰的代码。

总结:

在import Vue的过程中,Vue主要是在原型上完成方法的挂载,并且初始化了全局的API。