前言：深入了解 Vue 原始碼的時候，new Vue() 創建一個 Vue 實體就是最好的入口，只要我們了解這個函式具體做了什么事情，也就對 Vue 的底層實作有了基礎的了解，
尋找 Vue 建構式
Vue 專案原始碼構建一個 Vue.js 版本，使用是 rollup，具體的 npm 腳本陳述句我們可以在專案根目錄的 packjson.json 的 script 命令里面看到：
"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 ",
...
},
現在我們以 web 平臺下的完整版構建，也就是 npm run dev 為切入點，對應的 script 命令就是：
"dev": "rollup -w -c scripts/config.js --environment TARGET:web-full-dev"
什么是完整版構建呢？完整版構建是相對于運行版構建而言的，兩者關系可以用一個公式來描述：
運行時版 + Compiler = 完整版，所以，完整版就是比運行時版多了一個 Compiler 編譯的程序，那什么是 Compiler 編譯呢？可以簡單理解為字串模板 template 編譯為 render 渲染函式的這個程序，完整版的Vue是把這個程序放到了代碼執行階段，而運行時版則是放到了專案打包構建階段，
我們學習原始碼當然要學習得更加全面為好，所以在這里選擇完整版的構建去學習，
根據命令含義，我們在 scripts/config.js 檔案里面找到：
'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
},
最后，我們發現入口檔案就是 web/entry-runtime-with-compiler.js，這個檔案最后執行的代碼是
export default Vue
這個就是我們能拿到的 Vue 建構式，但是這不是終點，因為我們發現這個檔案開頭還有一句：
import Vue from './runtime/index'
說明 Vue 構造是從這個檔案里面來的，我們繼續進入這個檔案去看，又發現：
import Vue from 'core/index'
繼續到這個檔案，又發現：
import Vue from './instance/index'
所以，還得繼續到這個檔案里面，到這里，我們終于發現 Vue 建構式的定義了
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)
}
是不是有點失望，找了那么久，建構式才這么點，
其實不是的，這個只是一開始的 Vue 建構式，而在我們一路找來的那么多個 js 檔案，都是在對這個 Vue 建構式進行進一步的處理，一步一步處理后，在 web/entry-runtime-with-compiler.js 才得到我們開發者常見的 Vue 建構式，
而這些 js 檔案都具體對 Vue 建構式做了什么呢，下面這張圖可以簡單的描述一下：
好的，現在我們已經知道 Vue 建構式大概長什么樣子了，那么接下來就需要知道 Vue 建構式是怎么創建一個 Vue 實體的了：創建Vue實體二：Vue.prototype._init ;
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/184157.html
標籤：JavaScript
上一篇：js變數與簡單資料型別