10分钟直达Vue源码起点

Vue应用层面相对较简单，初级程序员也能根据官方文档开发出一个SPA项目。
但是在会用Vue之后，想要提高开发能力，看源码就是一个更好的选择了。

Vue源码

一. 下载地址：Vue版本v2.6.14
https://github.com/vuejs/vue/releases/tag/v2.6.14

二. 安装依赖
建议使用yarn安装，安装淘宝版yarnnpm i yarn tyarn -g
tyarn install

三. 启动项目
tyarn run dev

四. 找到Vue构造函数

• 1. 了解package.json(scripts,devDependencies)
     先看scripts脚本
     然后浏览一下用到的一些依赖
• 2. 我们运行的是dev，拿到执行脚本（两个信息：文件scripts/config.js， target：web-full-dev）
     "dev": "rollup -w -c scripts/config.js --environment TARGET:web-full-dev"
• 3. 进入脚本里的scripts/config.js，找到对应的入口文件:web/entry-runtime-with-compiler.js

// scripts/config.js line:132
'web-full-prod': {
    entry: resolve('web/entry-runtime-with-compiler.js'),
    dest: resolve('dist/vue.min.js'),
    format: 'umd',
    env: 'production',
    alias: { he: './entity-decoder' },
    banner
  },

• 4. 打开根目录下.flowconfig文件，找到web映射的目录
     module.name_mapper='^web/\(.*\)$' -> '<PROJECT_ROOT>/src/platforms/web/\1'
• 5. 打开文件web/entry-runtime-with-compiler.js,找到Vue引用
     import Vue from './runtime/index'
• 6. 打开文件./runtime/index,找到Vue引用
     import Vue from 'core/index'
• 7. 打开文件core/index,找到Vue引用
     import Vue from './instance/index'
• 8. 打开文件./instance/index(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

五. Vue源码调试

• 1. 修改examples/tree.index.html第24行
     将<script src="../../dist/vue.min.js"></script>改成
     <script src="../../dist/vue.js"></script>
• 2. 打印第一个调试信息，输出options
     在文件./instance/index第14行写入第一个调试代码console.log(options)
• 3. 在浏览器打开examples/tree.index.html
     如果看到以下内容，那么恭喜你，开启你的Vue源码之旅吧。
     image.png