开始一步一步解析vue源码，彻底搞懂它。
vue.js 是一套构建用户界面的渐进式框架，其轻量，易学受到许多开发者的喜爱。了解源码，有助于我们深刻理解vue。 知其然知其所以然，是每个工程师进阶的必经之路。话不多说，进入主题。
一. 模块概览
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)
根据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，继续寻找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的庐山真面目，它其实就是个构造函数。
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.js加载完成后，初始化了5个方法，分别是initMixin, stateMixin, eventsMixin, lifecycleMixin, renderMixin。 下次，我们来逐个理解她
网友评论