vue源码学习之从入口开始探索import Vue from 'vue'究竟发生了什么?

1、揭露vue庐山真面目

在web应用下,我们从他的入口platforms/web/entry-runtime-with-compiler.js开始看:
vue源码学习之从入口开始探索import Vue from 'vue'究竟发生了什么?_第1张图片
导出vue

从代码中我们可以看到最后导出了Vue对象,而这个vue对象实际上是通过import 从./runtime/index引入的

import Vue from './runtime/index'

import进来了之后又给vue的原型上挂载了$mount方法
vue源码学习之从入口开始探索import Vue from 'vue'究竟发生了什么?_第2张图片

那我们顺着import往上找,来到了runtime/index文件中,这个文件和刚才的文件结构类似,都是从其他文件引入vue,在给vue定义了一些静态的全局配置以及patch和$mount方法等之后,再将这个vue对象导出。
接下来根据import后面的路径来到了core/index,这个文件跟前两个文件的结构也是一样的,它从instance/index中引入了vue,并通过

initGlobalAPI(Vue)

初始化了一些vue的全局API。
最后我们来到了instance/index文件下,在这里见到了Vue的本体——一个function

vue源码学习之从入口开始探索import Vue from 'vue'究竟发生了什么?_第3张图片
vue本体
在这个function中进行了一个判断,表示Vue必须要用new的方法去实例化,否则就会报错。
这个函数下面调用了很多Mixin的方法,那这些方法是干啥的呢?
vue源码学习之从入口开始探索import Vue from 'vue'究竟发生了什么?_第4张图片
顺着import的第一行,我们来到init.js文件下
vue源码学习之从入口开始探索import Vue from 'vue'究竟发生了什么?_第5张图片
init.js
我们发现initMixin就是在Vue的原型链上挂在了一个_init初始化的方法。同样,在state.js中stateMixin也是给Vue的原型挂载了一些方法,比如delete、$watch等。也就是说每个Mixin就是往Vue原型上混入一些定义的方法。
个人觉得vue源码中的这种代码拆分的结构非常好,按照代码的功能将它们放到不同的模块下,这样对于代码的管理是非常友好的。

2、import过程中发生了什么

  • 找到Vue的定义
  • 通过各种Mixin给Vue的原型上挂载方法
  • 通过initGlobalAPI(Vue)给vue挂载很多静态方法

在有了原型方法和静态方法,我们就可以在代码中愉快的使用这些方法啦。

你可能感兴趣的:(vue源码学习之从入口开始探索import Vue from 'vue'究竟发生了什么?)