VueJs 源碼分析 ---（一） 整體對 vuejs 框架的理解

vue-2.x SourceCode

vue 2.x 源碼解析

關於vue，以及為何要來寫這份源碼解析的原因

筆者從最開始接觸到 vue 應該還是在 15年 10月份左右，當時聽說 前端圈中發生很多的變化，從那個時候，決定正式成為一名 前端er，且專業的前端，索性就離開當時所在的公司，做了為期大約 一個月的時間來准備找這么一份 前端的工作， 在這一個月了，每天基本上就宅在家里 寫寫demo ，看看視頻。 那個時候看的 還是慕課，因為 在大學里面 根本就不是 cs系的。所以那段時間里面看了大量的視頻，因為基礎知識太匱乏了，如果連最基本的 知識都不能很好的掌握的話，可能也不會有 后面能面試到一份還不錯的前端工作。（當時是在武漢的最大的一家房地產 上市企業）
（tips： 現在再回過頭來，仔細看看 打好基礎最好的方法方式就是去看書學習，什么看視頻，看別人寫的文章。都很不靠譜，因為別人寫的是別人理解過一遍的東西，和你自己理解的完全是不一樣的。）

嗯，進入到這家企業之后，見到了真正的 什么是互聯網公司，各個部門分工明確，前端組，java組，運維組，UI產品部門 等等，這里我就不過多贅述了，當然這里要非常感謝，在 博客園中給我 留言的那位前輩，當時我還在一家 小企業做 程序員，tips，是程序員 不是什么 前端工程師，也不是什么 php工程師，也不是什么 運維工程師，就是程序員，從切圖，到代碼實現，到交互，到后台數據庫，到 運維，基本上都說一個人在做，並且 現在的我看來，都做的很差。 希望現在有和我當年一樣經歷的同學，趕緊辭職，去找一份 專業互聯網企業的工作（當然，掃地、倒茶之類的就算了），去看看外面的世界。 會對你有很大的幫助的。

好了，廢話也說了這么多了。let's do i(ai)t(ti)

Vue 源碼第一步

當前 Vue 的版本 V2.2.2

在最新版本中，Vue 給出了 各種 規格大小的 種類。有專門做服務端渲染的vue， 也有專門用於 組件化前端開發的 版本，這里先介紹到這些。在后面的源碼分析中，我們會 詳細的解釋到，vue 為什么這么做。

在了解 vue 的源碼之前。我們需要 先了解一下 vuejs 的生命周期圖。然后我們才方便 根據 這個 生命周期圖，來一步步的揭開 vue 的神秘面紗。

(如果有同學覺得這張圖片太大不方便查看，可以打開 vuejs 的官網中的 生命周期圖，進行對照 本系列文章 進行閱讀。)

（tips：另外筆者是一個 發散性思維的人，遇到看到的問題，不了解可能會 開一個分支去 做詳細的理解和 介紹。 本文中 關於 js 基礎的知識也會提及到很多）

1、在 vue 的生命周期的第一步 就是一個 大大的 new 頂在了上面。

   new Vue()

JS 知識擴展

看上去是不是就很熟悉了，對。這里就說一個 構造函數的 實例化 的過程。 那么，我們來詳細的介紹下， new 這么一個東西，在 js 中到底是 做了哪些事情。簡單來講 js 在new 的過程中只做了三件事

1. 創建一個新對象
2. 將這個新對象的 proto 指向 構造函數的 prototype 成員對象
3. 將 構造函數的 this 指針 指向 這個新創建的對象

具體的文檔

關於 new 的相關介紹

然后，我們需要思考的問題來了。

去哪里找到 vue 實例化的 構造函數呢？

嗯，最后還是找到了。

vue 實例化構造函數

就是我們當前 該項目的 vue 文件夾下 core ／ instance ／ index.js

好，我們打開這個文件 看看里面具體是 什么

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

看着這個代碼覺得還ok，但是，在你查找 init 方法的時候，你會發現

Vue.prototype._init = function (options?: Object) {
    const vm: Component = this
    // a uid
    vm._uid = uid++
    // ...

這是什么 js 代碼啊？

原來一看， 這里寫的 flow 的代碼， 所以這里又得 插播一條 關於flow 的相關 知識的介紹了。

首先我們看看 vue 的作者 對於 選擇 flow 而不是 typescript 的原因

vue 源碼為什么選擇 flow 來完成

GitHub 地址：（歡迎 star 、歡迎推薦 : )

Vue 源碼分析