vue阅读准备

来源于慕课网，本文章只做总结。另：本人水平有限。大神忽略！

拿到源码后如何开始阅读

个人感觉此部分不是很重要，但还是总结一下。
这个其实可以通过npm scripts的命令来寻找到。因为vue的代码最后也会被打包编译。打开package.json文件便可看到以下命令，打包的scripts脚本有很多，大多数都是编译到不同平台运行的脚本文件（比如weex或ssr相关）。这里关注npm run build即可

"build": "node scripts/build.js"

我们可以根据脚本的提示找到scripts/build.js打开文件后可以看到如下的代码，以及一些相关配置，主要是针对路径的处理和一些roolup的配置。根据代码提示可以找到config.js

let builds = require('./config').getAllBuilds()

其实这个config文件大致只做了三件事情
1.resolve函数，用来获取不同文件的路径，然后做一些处理（大约在28行）
2.builds常量的定义的编译类型对象，是一个map集合（大约在38行）。执行编译命令的时候会根据不同的npm scripts选择不同的类型。这里我们可以关注一下Runtime+compiler的那个版本。代码如下。

  'web-full-esm': {
    entry: resolve('web/entry-runtime-with-compiler.js'),
    dest: resolve('dist/vue.esm.js'),
    format: 'es',
    alias: { he: './entity-decoder' },
    banner
  },

entry定义的就是代码的打包入口。vue的源码也是正式的从这个文件开始的entry-runtime-with-compiler.js。
dist打包后的代码，dist/vue.esm.js这个文件大家要关注一下。后期会通过vue-cli生成一个项目，代码调试基本都是在这个文件中进行。

3. genConfig函数，是rollup的打包配置。没有关注太多。

4.平时开发使用的都是runtime-only的代码。以上的文件是runtime-compiler的版本，其实二者的区别在于runtime-only会借助vue-loader将template模板，render函数等渲染好然后浏览器直接执行js脚本，但是runtime-compiler的版本是在执行过程中编译。其实在后期很多地方也是通过相同的函数实现，所以没有必要纠结到底要分析哪一种版本。

找到vue的主体代码

找vue代码的时候会遇见很多不同的函数，其实不必太在意。现在我们只管一门心思找到vue的主体代码即可

根据下面代码的提示，应该可以很快的定位到这个文件，他的真实路径是在src/platforms/web/ entry-runtime-with-compiler.js。至于entry中缺少的那部分，其实vue内部使用别名alias来做了处理。

entry: resolve('web/entry-runtime-with-compiler.js')

在entry-runtime-with-compiler.js中可以看到如下代码。大约在8行。

import Vue from './runtime/index'

然后是runtime/index。第一行，此处使用了alias别名处理。

import Vue from 'core/index'

然后是src/core/index。第一行。

import Vue from './instance/index'

然后是./instance/index。在这个文件中再也没有import Vue的字样了，那就证明vue的主体函数就存放在这个文件下！其实代码很少，那就全部贴出来看一下！

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

我大概解释一下这几行代码。上边那一堆mixin函数其实就一些状态的初始化，比如说data内的可观察数据就是在stateMixin中完成，生命周期就是在lifecycleMixin，渲染就是在renderMixin中完成。当我们使用new Vue的时候这些东西最后都会变成一个个方法，被挂载到vm实例上。
下边解释一下函数内部的代码，options就是new Vue({...options})。函数会先检查一下是否由new来生成，因为vm实例要是一个对象。然后直接执行_init方法，这个方法其实是在initMixin中被挂载上去的。
最后总结一下，vue其实就是一个函数，然后在初始化的时候在prototype上挂载一堆方法，new vue的时候，其实生成的是一个实例，这个实例继承了一堆方法来辅助我们完成相应的开发。
下一篇就跟着代码的思路走，直接分析一下initMixin方法，看一看vue如何完成初始化！