vue.js 是一套構(gòu)建用戶界面的漸進(jìn)式框架席镀，其輕量匹中，易學(xué)受到許多開(kāi)發(fā)者的喜愛(ài)。了解源碼豪诲，有助于我們深刻理解vue顶捷。
知其然知其所以然，是每個(gè)工程師進(jìn)階的必經(jīng)之路屎篱。話不多說(shuō)服赎，進(jìn)入主題。

image.png

一. 模塊概覽

vue的源碼主要分6個(gè)大模塊

二. 主入口分析

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 版本

說(shuō)明下缺厉，vue的compiler分兩種情況（web端）：

• 使用vue-loader在構(gòu)建時(shí)compiler，簡(jiǎn)稱：構(gòu)建時(shí)compiler隧土。
• 在vue運(yùn)行時(shí)提针，再去compiler，簡(jiǎn)稱：運(yùn)行時(shí)compiler曹傀。

這里辐脖，我們考慮全版的vue源代碼，選擇runtime + 運(yùn)行時(shí)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的主入口文件啦~

image.png

三. Vue真面目是個(gè)啥

我們進(jìn)入entry-runtime-with-compiler.js主文件嗜价，先分析主干，拋開(kāi)分支：

// ...
import Vue from './runtime/index'
import { compileToFunctions } from './compiler/index'
// ...
Vue.prototype.$mount = function () {
 // ...
}
Vue.compile = compileToFunctions

export default Vue

runtime/index

我們進(jìn)入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í)就是個(gè)構(gòu)造函數(shù)翔脱。

image.png

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個(gè)方法，分別是initMixin, stateMixin, eventsMixin, lifecycleMixin, renderMixin绿鸣。 下面疚沐，我們來(lái)逐個(gè)擊破。

四. initMixin

 Vue.prototype._init = function (options?: Object) {
  const vm: Component = this
  // ...
}

vue在此方法中聲明了_init方法潮模。
這實(shí)際上就是我們使用vue時(shí)亮蛔， new Vue(options)，實(shí)例化vue時(shí)執(zhí)行的方法擎厢。

此方法核心流程如下：

1. 合并options配置究流，并掛載至 vm.$options上

2. initLifecycle

初始化vm.$parent, vm.$root, vm.$children, vm.$refs 等屬性值

3. initEvents

初始化vm._events={}辣吃，初始化事件系統(tǒng)
實(shí)際上是父組件在模板中使用v-on或@注冊(cè)的監(jiān)聽(tīng)子組件內(nèi)觸發(fā)的事件

4. initRender

主要定義2個(gè)方法：

• vm._c，此方法用于用戶使用template模式
• vm.$createElement芬探，此方法用于用戶手寫(xiě)render函數(shù)

這2個(gè)方法神得，最終都會(huì)調(diào)用createElement方法，createElement方法將在虛擬DOM章節(jié)重點(diǎn)分析偷仿，這里我們只需知道哩簿，此方法返回虛擬DOM

5. 調(diào)用 beforeCreate 鉤子

6. initInjections

此方法，里面的inject和provide是成對(duì)出現(xiàn)的酝静。作用是父組件提供數(shù)據(jù)节榜，任意嵌套層級(jí)的子組件可以去接受。其中provide是數(shù)據(jù)提供方别智，inject是數(shù)據(jù)接受方宗苍。

7. initState

• 初始化state, props, methods, computed, watch
• 其中初始化state, props, methods時(shí)， vue會(huì)遍歷data中所有的key亿遂，檢測(cè)是否在props浓若，methods重復(fù)定義
• props變量有多種寫(xiě)法，vue會(huì)進(jìn)行統(tǒng)一轉(zhuǎn)化蛇数，轉(zhuǎn)化成{ a: {type: "xx", default: 'xx'} }
• 將data, props都掛載到vm._data, vm._props上挪钓。設(shè)置訪問(wèn)數(shù)據(jù)代理，訪問(wèn)this.xx耳舅，實(shí)際上訪問(wèn)的是vm._data[xx], vm._props[xx]
• 給_data, _props添加響應(yīng)式監(jiān)聽(tīng)

8. initProvide

同initInjections

9. 調(diào)用 created 鉤子

五. stateMixin

• 定義Vue.prototype.$data, Vue.prototype.$props為響應(yīng)式碌上。
• 獲取vm.$data實(shí)際上是獲取vm._data， vm.$props實(shí)際上是vm._props
• 定義Vue.prototype.$watch方法浦徊，實(shí)際上是實(shí)例化Watcher類

六. eventsMixin

• 在Vue原型上馏予，定義$on, $once, $off, $emit 事件方法，并返回vm

七. lifecycleMixin

• 在Vue.prototype上定義 _update, $forceUpdate, $destroy方法

八. renderMixin

• 在Vue原型上盔性，定義$nextTick方法
• 在Vue原型上霞丧，定義_render方法，值得注意的是冕香，該方法會(huì)調(diào)用vm.$createElement創(chuàng)建虛擬DOM蛹尝，如果返回值vnode不是虛擬DOM類型，將創(chuàng)建一個(gè)空的虛擬DOM悉尾。
  虛擬DOM:VNode突那，實(shí)際上是一個(gè)類，結(jié)構(gòu)大致如下：

class VNode {
  tag: string | void;
  data: VNodeData | void;
  children: ?Array<VNode>;
  text: string | void;
  elm: Node | void;
  ns: string | void;
  context: Component | void; 
  key: string | number | void;
  componentOptions: VNodeComponentOptions | void;
  componentInstance: Component | void;
  parent: VNode | void; 

  // ...更多屬性构眯，可以暫時(shí)不關(guān)注
}

createElement方法最終創(chuàng)建VNode愕难，相關(guān)6個(gè)參數(shù)如下：

VNodeData數(shù)據(jù)結(jié)構(gòu)：

interface VNodeData {
  key?: string | number;
  slot?: string;
  scopedSlots?: { [key: string]: ScopedSlot | undefined };
  ref?: string;
  refInFor?: boolean;
  tag?: string;
  staticClass?: string;
  class?: any;
  staticStyle?: { [key: string]: any };
  style?: string | object[] | object;
  props?: { [key: string]: any };
  attrs?: { [key: string]: any };
  domProps?: { [key: string]: any };
  hook?: { [key: string]: Function };
  on?: { [key: string]: Function | Function[] };
  nativeOn?: { [key: string]: Function | Function[] };
  transition?: object;
  show?: boolean;
  inlineTemplate?: {
    render: Function;
    staticRenderFns: Function[];
  };
  directives?: VNodeDirective[];
  keepAlive?: boolean;
}

九. 總結(jié)

• Vue本質(zhì)上葱弟，是一個(gè)構(gòu)造函數(shù)。
• 初始化了：state, props, methods, computed, watch饵骨，$destory翘悉，$data，$props居触，$forceUpdate等妖混。
• 對(duì)_data, _props使用 Object.defineProperty 添加響應(yīng)式
• 設(shè)置訪問(wèn)數(shù)據(jù)代理，訪問(wèn)this.xx轮洋，實(shí)際上訪問(wèn)的是vm._data[xx], vm._props[xx]
• 添加event事件系統(tǒng)制市，實(shí)際上初始化的是父組件在模板中使用v-on或@注冊(cè)的監(jiān)聽(tīng)子組件內(nèi)觸發(fā)的事件
• 掛載createElement，為后續(xù)render返回虛擬DOM做準(zhǔn)備弊予。
• 調(diào)用對(duì)應(yīng)的組件生命周期鉤子祥楣， beforeCreate, created

下一章，我們將詳細(xì)分析：vue中數(shù)據(jù)變化監(jiān)聽(tīng)

碼字不易汉柒，多多關(guān)注误褪，點(diǎn)贊~??