Vue源码分析(一) : new Vue() 做了什么

2019-07-18 本文已影响5人 Tiffany_c4df

Vue源码分析(一) : new Vue() 做了什么

author: @TiffanysBear

在了解new Vue做了什么之前，我们先对Vue源码做一些基础的了解，如果你已经对基础的源码目录设计等有基础的了解的话，可以跳过下面这部分。

源码目录设计

Vue.js 的源码都在 src 目录下，其目录结构如下。

src
├── compiler        # 编译相关 
├── core            # 核心代码 
├── platforms       # 不同平台的支持
├── server          # 服务端渲染
├── sfc             # .vue 文件解析
├── shared          # 共享代码

compiler

compiler 目录包含 Vue.js 所有编译相关的代码。它包括把模板解析成 AST 语法树，AST语法树优化，代码生成等功能。

编译的工作可以在构建时做（可以借助 webpack、vue-loader 等插件）；也可以在运行时做，使用包含构建功能的 Vue.js。编译是一项耗性能的工作，所以更推荐前者——离线编译。

core

core 目录包含了 Vue.js 的核心代码，包括有内置组件、全局 API 封装，Vue 实例化、Obsever、Virtual DOM、工具函数 Util 等等。

platform

Vue.js 是一个跨平台的 MVVM 框架，它可以跑在 web 上，也可以配合 weex 跑在 native 客户端上。platform 是 Vue.js 的入口，2 个目录代表 2 个主要入口，分别打包成运行在 web 上和 weex 上的 Vue.js。

server

Vue.js 2.0 支持了服务端渲染，所有服务端渲染相关的逻辑都在这个目录下。注意：这部分代码是跑在服务端的 Node.js，不要和跑在浏览器端的 Vue.js 混为一谈。

服务端渲染主要的工作是把组件渲染为服务器端的 HTML 字符串，将它们直接发送到浏览器，最后将静态标记"混合"为客户端上完全交互的应用程序。

sfc

通常我们开发 Vue.js 都会借助 webpack 构建，然后通过 .vue 单文件来编写组件。

这个目录下的代码逻辑会把 .vue 文件内容解析成一个 JavaScript 的对象。

shared

Vue.js 会定义一些工具方法，这里定义的工具方法都是会被浏览器端的 Vue.js 和服务端的 Vue.js 所共享的。

接下来我们来找一下Vue的入口文件，我们接下来的分析都是基于platform为web的环境下进行的分析，从 package.json 和 config的的打包配置中里可以看出，运行在web环境 （Runtime only (CommonJS))的入口文件在 web/entry-runtime.js下。

Vue入口文件

Vue入口文件目录 vue/src/core/instance/index.js

// vue/src/core/instance/index.js
import { initMixin } from './init'
import { stateMixin } from './state'
import { renderMixin } from './render'
import { eventsMixin } from './events'
import { lifecycleMixin } from './lifecycle'
import { warn } from '../util/index'

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')
  }
  this._init(options)
}

initMixin(Vue)
stateMixin(Vue)
eventsMixin(Vue)
lifecycleMixin(Vue)
renderMixin(Vue)

export default Vue

采用的是ES5的写法，并不是ES6的Class写法的优点，是因为：

1、使用混入Mixin的方式传入Vue，为Vue的原型prototype上增加方法。class难以实现这种方法
2、此种方式将代码模块合理划分，将扩展分散到多个模块中去实现，使得代码文件不会过于庞大，便于维护和管理。这个编程技巧以后可以用于代码开发实现中。

通过Mixin增加的原型方法：

// vue/src/core/instance/index.js
initMixin(Vue) // _init
stateMixin(Vue) // $set、$delete、$watch
eventsMixin(Vue) // $on、$once、$off、$emit
lifecycleMixin(Vue) // _update、$forceUpdate、$destroy、
renderMixin(Vue) // $nextTick、_render

initGlobalAPI

在 vue/src/core/index.js 中，调用的initGlobalAPI(Vue)，是为Vue增加静态方法的，

在路径 vue/src/core/global-api/ 目录下的文件中，都是给Vue添加的静态方法

比如：

Vue.use // 使用plugin
Vue.extend
Vue.mixin 
Vue.component 
Vue.directive 
Vue.filter

有了这些基础的了解和一步步的跟踪查找后，我们一步一步找到了 new Vue 所在的位置，接下来我们来看下 new Vue 到底做了什么？

new Vue 做了什么

从入口的文件看来，通过new关键字初始化，调用了

// src/core/instance/index.js

this._init(options)

然后从Mixin增加的原型方法看，initMixin(Vue)，调用的是为Vue增加的原型方法_init

// src/core/instance/init.js

Vue.prototype._init = function (options?: Object) {
    const vm: Component = this
    ....
    ....
    // expose real self
    vm._self = vm
    initLifecycle(vm)
    initEvents(vm)
    initRender(vm)
    callHook(vm, 'beforeCreate')
    initInjections(vm) // resolve injections before data/props
    initState(vm)
    initProvide(vm) // resolve provide after data/props
    callHook(vm, 'created')
    
    ....
    ....
    
    if (vm.$options.el) {
      vm.$mount(vm.$options.el)
    }
}

所以，从上面的函数看来，new vue所做的事情，就像一个流程图一样展开了，分别是

合并配置
初始化生命周期
初始化事件中心
初始化渲染
调用 beforeCreate 钩子函数
init injections and reactivity（这个阶段属性都已注入绑定，而且被 $watch 变成reactivity，但是 $el 还是没有生成，也就是DOM没有生成）
初始化state状态（初始化了data、props、computed、watcher）
调用created钩子函数。

在初始化的最后，检测到如果有 el 属性，则调用 vm.$mount 方法挂载 vm，挂载的目标就是把模板渲染成最终的 DOM。

Vue代码初始化的主线逻辑非常分明，使得逻辑和流程非常清楚，这种编程方法值得学习。

最后

现在的部分只是粗略的函数上讲了 new Vue 的过程和含义，接下来的文档会继续对Vue的源码进行学习和分析，会接着更细地分析在生命周期lifecyle下每一个函数后面具体所做的事情。