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

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

源碼是vue2.4.0版本。

在看源碼之前先分析下項目結構，對項目有一個比較全面的了解。

vue-dev項目結構

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

了解了大體的目錄結構之后，就從package.json開始看起了。在package.json文件里我們發現在執行npm run dev的時候，執行的下面這個腳本，也就是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
  } 

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

//初始化入口
initMixin(Vue)
//數據綁定，$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實例

initEvents -- 創建_events事件管理對象,$options._parentListeners監聽父組件listener

initRender --創建_vnode,_staticTrees,$slots,$scopedSlots,$createElement給vue實例

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

initState--

  initProps--綁定props
  initMethods--綁定方法
  initData-通過observe進行數據綁定, 給每一個data的屬性加上getter,setter.

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

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

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

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

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

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

有不足之處請指正，歡迎一起交流學習。

輪子工廠--一個分享優秀的vue,angular組件的網站