Vue源码解析(一)： 创建vue程序的背后发生了什么

主要大纲:从initGlobalAPI方法看Vue.config全局配置寻根问祖-Vue的构造函数的出生地先来一段最常见的vue代码demo<div id=“app”> {{ message }}</div>// jsvar vm = new Vue({ el: ‘#app’, data: { message: ‘hello vue’ }})上面已经创建了一个vue应用程序；从上面很容易就看出来 Vue是一个构造器，vm是用这个构造器构造出来的实例化对象，实例化的时候传入了参数，参数中包括el和data上述延伸了3个问题：Vue 构造器是什么模样？Vm可以使用的方法，即vue的开放API都在源码里面怎么实现的？我们传入构造方法内的参数发生了什么这些问题是我们解锁vue源码的最开始的步骤，所以我们不妨通过vue源码的入口开始寻找这些源码的实现在源码的src/platforms/web下面放着不同版本的构建entry文件，这些文件中导出export的Vue，都是从src/core/instance/index这个文件import过来的，我们先看下入口文件能带给我们什么答案：// src/core/instance/indeximport Vue from ‘./instance/index’import { initGlobalAPI } from ‘./global-api/index’import { isServerRendering } from ‘core/util/env’import { FunctionalRenderContext } from ‘core/vdom/create-functional-component’initGlobalAPI(Vue)这个入口文件做了3件事：引用了 ./instance/index, 暴露了vue的来源，即构造器调用initGlobalAPI方法，将vue传进去， 给vue拓展了全局静态方法将vue暴露出去这个入口文件的意义，是在暴露vue之前，给vue通过initGlobalAPI方法给vue拓展了全局静态方法，对应Vue的外部API是 Vue.config，包含了Vue的全局配置，Vue.config.silent // 日志与警告Vue.config.errorHandler // 这个处理函数被调用的时候，可以获取错误信息和Vue实例Vue.config.devtools // 配置是否允许 vue-devtools 检查代码…..从initGlobalAPI方法看Vue.config全局配置initGlobalAPI方法定义了configDef对象，它的getter方法会的属性值是config，setter方法给出警告不允许修改。最后在vue上添加了config属性，属性描述返回configDef对象export function initGlobalAPI (Vue: GlobalAPI) { // config const configDef = {} configDef.get = () => config if (process.env.NODE_ENV !== ‘production’) { configDef.set = () => { warn( ‘Do not replace the Vue.config object, set individual fields instead.’ ) }}Object.defineProperty(Vue, ‘config’, configDef) // 添加config属性除此之外，还定义了util属性，但是并没有暴露到外面，也并不建议外部去使用寻根问祖-Vue的构造函数的出生地了解了构造函数，也就知道了new vue()的时候发生了什么下面这段代码就是Vue的构造方法，我们可以直观的看出vue构造器是使用ES5的Function去实现类，是因为可以通过prototype往vue原型上拓展很多方法，把这些方法拆分到不同的文件/模块下，这样更有利于代码的维护，与协同开发比如在这个文件中，可以看到把Vue当作一个参数传进下面的**Mixin方法中，这些方法都是通过接收vue，在它的prototype上面定义一些功能的;function Vue (options) { if (process.env.NODE_ENV !== ‘production’ && !(this instanceof Vue) ) { warn(‘Vue is a constructor and should be called with the new keyword’) // vue必须是new vue()的实例化对象 } console.log(‘options’, options) this._init(options) // 调用内部_init方法}initMixin(Vue) // 在created生命周期函数之前的操作stateMixin(Vue) // 利用 definedProperty 进行静态数据的订阅发布eventsMixin(Vue) // 实例事件流的注入, 利用的是订阅发布模式的事件流构造lifecycleMixin(Vue) // renderMixin(Vue) // 实现 _render 渲染虚拟domexport default Vue这个构造函数的最核心点,就是this._init(options)在此处打断点，可以看到参数options传进来的就是外面我们实例化时传入的参数el 和 datanew Vue({ el: ‘#app’, data: { message: ‘hello vue’ }})这个_init方法出自initMixin 函数看完这个函数，我们梳理出整个初始化阶段源码的几个重要的节点初始化options参数进行合并配置初始化生命周期初始化时间系统初始化state,包括data、props、 computed、watcherexport function initMixin (Vue: Class<Component>) {console.log(‘Vue’, Vue)Vue.prototype._init = function (options?: Object) {const vm: Component = this// a uid 实例化的uid递增1vm._uid = uid++let startTag, endTag/* istanbul ignore if /…// 用_isVue来标识当前的实例是个Vue实例，这样做是为了后续被observedvm._isVue = true // 合并配置options,并判断是否是内部Component的options的初始化if (options && options._isComponent) { // 内部 initInternalComponent(vm, options)} else { // 非内部 vm.$options = mergeOptions( resolveConstructorOptions(vm.constructor), options || {}, vm )}// 在render中将this指向vm._renderProxyif (process.env.NODE_ENV !== ‘production’) { initProxy(vm)} else { vm._renderProxy = vm}// expose real selfvm._self = vm// 初始化生命周期initLifecycle(vm) // 初始化事件注册initEvents(vm)// 初始化渲染initRender(vm)// 触发回掉函数中的beforeCreate钩子函数callHook(vm, ‘beforeCreate’)initInjections(vm) // resolve injections before data/props// 初始化vm的状态,包括data、props、computed、watcher等initState(vm)initProvide(vm) // resolve provide after data/props// vm已经创建好来，回掉created钩子函数callHook(vm, ‘created’)/ istanbul ignore if */…// 将实例进行挂载if (vm.$options.el) { vm.$mount(vm.$options.el) }}}