vue源码学习（一）——从入口开始

摘要：学习源码时，我们首先需要看的是文件，该文件里配置了的依赖以及开发环境和生产环境的编译的启动脚本等其他信息。一个是完整版，一个是运行时。运行时用来创建实例渲染并处理虚拟等的代码。基本上就是除去编译器的其它一切。

学习vue源码时，我们首先需要看的是package.json文件，该文件里配置了vue的依赖以及开发环境和生产环境的编译的启动脚本等其他信息。首先我们需要关注的是script。我们这里先看第一个dev脚本：

"dev": "rollup -w -c scripts/config.js --environment TARGET:web-full-dev"

我们可以看到vue是采用了rollup编译的脚本，然后对应的查看其配置文件config.js

const builds = {
...
// Runtime+compiler development build (Browser)
  "web-full-dev": {
    entry: resolve("web/entry-runtime-with-compiler.js"),
    dest: resolve("dist/vue.js"),
    format: "umd",
    env: "development",
    alias: { he: "./entity-decoder" },
    banner
  },
...
}

在该文件中我们可以找到web-full-dev的配置项，并且知道其编译的文件为"web/entry-runtime-with-compiler.js"
那么我们就需要去找到该文件了。
我们可以发现entry-runtime-with-compiler.js的其中有一行代码是：

import Vue from "./runtime/index"

然后继续跟着代码往上找，我们会发现还是嵌套了好几层，最后在"/instance/index"中找到我们vue的定义：最终其路劲如下：

/src/platforms/web/web-runtime-with-compiler.js   
=> /src/platforms/web/runtime/index.js 
=> /src/core/index.js 
=> /src/core/instance/index.js 

最终我们在instance/index.js上找到了vue的庐山真面目，他的构造函数及其简单：

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)
}

我们可以发现它并没有使用class的，只是一个普通的构造函数，通过 !(this instanceof Vue) 来强制使用new来构建。
之所以不采用class，个人理解是为了更好的把代码拆分。原型上的方法只需要通过prototype来添加。如下

initMixin(Vue) // 这里主要注册了_init
stateMixin(Vue) // $set,$delete,$watch
eventsMixin(Vue) // $on, $once, $off, $emit
lifecycleMixin(Vue) //  _update, $forceUpdate,$destroy
renderMixin(Vue) // $nextTick, _render

这边都是基于在Vue上扩展方法，这样就把代码分离开发，方便维护。不需要全部写到Vue函数内部。
然后我们往回走，我们可以看到/src/core/index.js 中

initGlobalAPI(Vue)
Object.defineProperty(Vue.prototype, "$isServer", {
  get: isServerRendering
})
Object.defineProperty(Vue.prototype, "$ssrContext", {
  get () {
    /* istanbul ignore next */
    return this.$vnode && this.$vnode.ssrContext
  }
})

Object.defineProperty(Vue, "FunctionalRenderContext", {
  value: FunctionalRenderContext
})

Vue.version = "__VERSION__"

该文件中主要就是注册全局API，以供我们内部或外部使用
再往上/src/platforms/web/runtime/index.js，我们可以看到

// install platform specific utils
Vue.config.mustUseProp = mustUseProp
Vue.config.isReservedTag = isReservedTag
Vue.config.isReservedAttr = isReservedAttr
Vue.config.getTagNamespace = getTagNamespace
Vue.config.isUnknownElement = isUnknownElement

// install platform runtime directives & components
extend(Vue.options.directives, platformDirectives)
extend(Vue.options.components, platformComponents)

// install platform patch function 
Vue.prototype.__patch__ = inBrowser ? patch : noop // 用于把vNode显示到dom上的方法，这边要区分是浏览器环境还是weex环境

// public mount method
Vue.prototype.$mount = function () {
.....
} // 把dom挂在到页面上

这边就是注册一些全局的工具，以及patch方法
那么再往上：src/platforms/web/web-runtime-with-compiler.js, 这个文件中主要就是重写$mount

const mount = Vue.prototype.$mount
Vue.prototype.$mount = function (
){
...
}

那么为什么要重写呢？原来在runtime里面的$mount方法是没有编译功能的，而最后一个重写就是增加了编译。
在vue脚手架我们会让我们选择哪个版本：如下图

这就是2个版本的区别，是否包含编译功能。一个是完整版，一个是运行时。
vue官方属于解释了：

完整版：同时包含编译器和运行时的版本。
编译器：用来将模板字符串编译成为 JavaScript 渲染函数的代码。
运行时：用来创建 Vue 实例、渲染并处理虚拟 DOM 等的代码。基本上就是除去编译器的其它一切。

如果你需要在客户端编译模板 (比如传入一个字符串给 template 选项，或挂载到一个元素上并以其 DOM 内部的 HTML 作为模板)，就将需要加上编译器，即完整版：
// 需要编译器
new Vue({
  template: "
{{ hi }}
"
})

// 不需要编译器
new Vue({
  render (h) {
    return h("div", this.hi)
  }
})

重写$mount方法就是对template就行了编译转换为render方法
好了这边就简要的介绍了vue的入口。

您的点赞是我继续努力的动力！