摘要：今天開始打算用個(gè)月的時(shí)間讀一些源碼，先從的開始吧。進(jìn)入這個(gè)文件，它引用了來進(jìn)行實(shí)例化。也就是初始化的核心代碼了。

今天開始打算用3個(gè)月的時(shí)間讀一些源碼，先從MVVM的vue開始吧。
vue是一個(gè)非常不錯(cuò)的前端框架，不僅體積小，性能高，而且學(xué)習(xí)曲線非常平緩，很容易上手。官方文檔也很詳解，配套的構(gòu)建工具很完事。還有很多第三方的組件和組件庫，可以讓開發(fā)者更高效的工作。

源碼是vue2.4.0版本。

在看源碼之前先分析下項(xiàng)目結(jié)構(gòu)，對(duì)項(xiàng)目有一個(gè)比較全面的了解。

vue-dev項(xiàng)目結(jié)構(gòu)

├── build --------------------------------- 構(gòu)建相關(guān)文件
├── dist ---------------------------------- 生成文件的輸出目錄
├── examples ------------------------------ 一些vue使用的例子
├── flow ---------------------------------- flow(Flow is a static type checker for your JavaScript code.)類型聲明
├── package.json -------------------------- 依賴管理
├── test ---------------------------------- 測(cè)試文件
├── src ----------------------------------- 源碼
│   ├── compiler -------------------------- 編譯器代碼，template-->render function
│   │   ├── parser ------------------------ 模板字符串轉(zhuǎn)-->抽象語法樹
│   │   ├── codegen ----------------------- 抽象語法樹(AST)-->render function
│   │   ├── optimizer.js ------------------ 分析靜態(tài)樹，優(yōu)化vdom渲染
│   ├── core ------------------------------ 核心代碼
│   │   ├── observer ---------------------- 雙向綁定，數(shù)據(jù)觀察的代碼
│   │   ├── vdom -------------------------- VNode對(duì)象&patch方法的代碼
│   │   ├── instance ---------------------- Vue構(gòu)造函數(shù)相關(guān)的代碼
│   │   ├── global-api -------------------- Vue構(gòu)造函數(shù)掛載全局方法(靜態(tài)方法)或?qū)傩缘拇a
│   │   ├── components -------------------- 通用組件
│   ├── server ---------------------------- SSR(server-side rendering)的代碼
│   ├── platforms ------------------------- 平臺(tái)相關(guān)代碼
│   ├── sfc ------------------------------- 對(duì)單文件組件進(jìn)行解析
│   ├── shared ---------------------------- 通用代碼(util之類)

了解了大體的目錄結(jié)構(gòu)之后，就從package.json開始看起了。在package.json文件里我們發(fā)現(xiàn)在執(zhí)行npm run dev的時(shí)候，執(zhí)行的下面這個(gè)腳本，也就是Target是web-full-dev

"scripts": {
    "dev": "rollup -w -c build/config.js --environment TARGET:web-full-dev",
     ...
  }

之后去build/config.js里去看看 web-full-dev是什么

  "web-full-dev": {
    entry: resolve("web/entry-runtime-with-compiler.js"),
    dest: resolve("dist/vue.js"),
    format: "umd",
    env: "development",
    alias: { he: "./entity-decoder" },
    banner
  } 

我們看到這個(gè)的入口文件是entry-runtime-with-compiler.js。進(jìn)入這個(gè)文件，它引用了/src/platform/runtime/index--->/src/core/index--->/src/core/instance/index來進(jìn)行實(shí)例化vue。
instance/index.js也就是vue初始化的核心代碼了。

//初始化入口
initMixin(Vue)
//數(shù)據(jù)綁定，$watch方法
stateMixin(Vue)
//事件方法，比如$on,$off,$emit
eventsMixin(Vue)
//生命周期方法
lifecycleMixin(Vue)
//渲染方法，用來生成render function 和 VNode
renderMixin(Vue)

initMixin方法
首選來具體看一下initMixin里做了什么

initLifecycle -- 定義$parent, $root, $children, $refs, _watch,
_inactive, _directInactive, _isMounted, _isDestroyed, _isBeingDestroyed給vue實(shí)例

initEvents -- 創(chuàng)建_events事件管理對(duì)象,$options._parentListeners監(jiān)聽父組件listener

initRender --創(chuàng)建_vnode,_staticTrees,$slots,$scopedSlots,$createElement給vue實(shí)例

callHook(vm, "beforeCreate")--執(zhí)行beforeCreate的鉤子方法

initState--

  initProps--綁定props
  initMethods--綁定方法
  initData-通過observe進(jìn)行數(shù)據(jù)綁定, 給每一個(gè)data的屬性加上getter,setter.

callHook(vm, "created")--執(zhí)行created的鉤子方法

vm.$mount(vm.$options.el) -- 通過el or template or render function 渲染dom

stateMixin方法
數(shù)據(jù)綁定 將$watch，$data，$props，$set，$delete加在Vue.prototype上

eventsMixin方法
初始化事件方法，定義$on,$off,$emit，$once到Vue.prototype上

lifecycleMixin方法
生命周期方法，定義_update,$forceUpdate,$destroy到Vue.prototype上

renderMixin方法
渲染方法，用來生成render function 和 VNode

有不足之處請(qǐng)指正，歡迎一起交流學(xué)習(xí)。

輪子工廠--一個(gè)分享優(yōu)秀的vue,angular組件的網(wǎng)站