開始一步一步解析vue源碼收恢，徹底搞懂它武学。
vue.js 是一套構建用戶界面的漸進式框架，其輕量伦意，易學受到許多開發(fā)者的喜愛火窒。了解源碼，有助于我們深刻理解vue驮肉。 知其然知其所以然熏矿，是每個工程師進階的必經(jīng)之路。話不多說离钝，進入主題票编。
一. 模塊概覽
vue的源碼主要分6個大模塊
模塊名 說明
compiler 編譯相關
core vue核心代碼
platforms 平臺，目前是web和weex
server 服務端渲染
sfc .vue文件解析
shared 共享代碼
二. 主入口分析
vue使用rollup做為打包工具卵渴，我首先查看package.json中的scripts慧域。
package.json
"scripts": {
? ? "dev": "rollup -w -c scripts/config.js --environment TARGET:web-full-dev",
? ? "dev:cjs": "rollup -w -c scripts/config.js --environment TARGET:web-runtime-cjs-dev",
? ? "dev:esm": "rollup -w -c scripts/config.js --environment TARGET:web-runtime-esm",
? ? "dev:test": "karma start test/unit/karma.dev.config.js",
? ? "dev:ssr": "rollup -w -c scripts/config.js --environment TARGET:web-server-renderer",
? ? "dev:compiler": "rollup -w -c scripts/config.js --environment TARGET:web-compiler ",
? ? "dev:weex": "rollup -w -c scripts/config.js --environment TARGET:weex-framework",
? ? "dev:weex:factory": "rollup -w -c scripts/config.js --environment TARGET:weex-factory",
? ? "dev:weex:compiler": "rollup -w -c scripts/config.js --environment TARGET:weex-compiler ",
? ? "build": "node scripts/build.js",
? ? "build:ssr": "npm run build -- web-runtime-cjs,web-server-renderer",
? ? "build:weex": "npm run build -- weex",
? ? "test": "npm run lint && flow check && npm run test:types && npm run test:cover && npm run test:e2e -- --env phantomjs && npm run test:ssr && npm run test:weex",
? ? "test:unit": "karma start test/unit/karma.unit.config.js",
? ? "test:cover": "karma start test/unit/karma.cover.config.js",
? ? "test:e2e": "npm run build -- web-full-prod,web-server-basic-renderer && node test/e2e/runner.js",
? ? "test:weex": "npm run build:weex && jasmine JASMINE_CONFIG_PATH=test/weex/jasmine.js",
? ? "test:ssr": "npm run build:ssr && jasmine JASMINE_CONFIG_PATH=test/ssr/jasmine.js",
? ? "test:sauce": "npm run sauce -- 0 && npm run sauce -- 1 && npm run sauce -- 2",
? ? "test:types": "tsc -p ./types/test/tsconfig.json",
? ? "lint": "eslint src scripts test",
? ? "flow": "flow check",
? ? "sauce": "karma start test/unit/karma.sauce.config.js",
? ? "bench:ssr": "npm run build:ssr && node benchmarks/ssr/renderToString.js && node benchmarks/ssr/renderToStream.js",
? ? "release": "bash scripts/release.sh",
? ? "release:weex": "bash scripts/release-weex.sh",
? ? "release:note": "node scripts/gen-release-note.js",
? ? "commit": "git-cz"
? },
我們主要看build命令： node scripts/build.js
scripts/build.js 主干代碼如下：
let builds = require('./config').getAllBuilds();
// 此處省略n行
build(builds)
根據(jù)config.js獲取到getAllBuilds方法，這里我們看 runtime + compiler 版本
說明下浪读，vue的compiler分兩種情況（web端）：
使用vue-loader在構建時compiler昔榴，簡稱：構建時compiler辛藻。
在vue運行時，再去compiler互订，簡稱：運行時compiler吱肌。
這里，我們考慮全版的vue源代碼仰禽，選擇runtime + 運行時compiler 版本
// Runtime+compiler ES modules build (for direct import in browser)
? 'web-full-esm-browser-prod': {
? ? entry: resolve('web/entry-runtime-with-compiler.js'),
? ? dest: resolve('dist/vue.esm.browser.min.js'),
? ? format: 'es',
? ? transpile: false,
? ? env: 'production',
? ? alias: { he: './entity-decoder' },
? ? banner
? },
到這里氮墨，我們已找到vue的主入口文件啦~
三. Vue真面目是個啥
我們進入entry-runtime-with-compiler.js主文件，先分析主干吐葵，拋開分支：
// ...
import Vue from './runtime/index'
import { compileToFunctions } from './compiler/index'
// ...
Vue.prototype.$mount = function () {
// ...
}
Vue.compile = compileToFunctions
export default Vue
runtime/index
我們進入runtime/index.js勇边，繼續(xù)尋找vue
import Vue from 'core/index'
// ...
export default Vue
core/index
import Vue from './instance/index'
import { initGlobalAPI } from './global-api/index'
// ...
initGlobalAPI(Vue)
// ...
export default Vue
instance/index
到這里，我們終于看到Vue的廬山真面目折联，它其實就是個構造函數(shù)。
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
到這里识颊，我們已經(jīng)看到诚镰，vue.js加載完成后，初始化了5個方法祥款，分別是initMixin, stateMixin, eventsMixin, lifecycleMixin, renderMixin清笨。 下次，我們來逐個理解她
