>[success] # Vue2.x 源碼基本分析 1. **完整版**：同時包含**編譯器和運行時**的版本。Vue中的**Template**需要**編譯器將其轉換為render函數**變為**虛擬DOM**才能使用，而運行時（沒有編譯器）直接編譯template會報錯并提示使用完整版進行編譯 2. **編譯器**：用來將**模板字符串**編譯成為 **JavaScript 渲染函數的代碼，體積大、效率低**。 3. 運行時：用來創建 **Vue 實例**、渲染并處理**虛擬 DOM** 等的代碼，體積小、效率高。基本上就是除去編譯器的代碼。即不包含編譯器，**不包含編譯器**會少三千多行代碼, **體積要小大約 30%** 4. **UMD**：UMD 版本**通用的模塊版本**，支持多種模塊方式（AMD\直接掛載到瀏覽器對象中\CommonJS）。 vue.js 默認文件就是**運行時 + 編譯器的UMD 版本** 5. **CommonJS(cjs)**：CommonJS 版本用來配合老的打包工具比如 Browserify 或 webpack 1。 6. **ES Module**：從 2.6 開始 Vue 會提供兩個 ES Modules (ESM) 構建文件，為現代打包工具提供的版本。ESM 格式被設計為可以被靜態分析，所以打包工具可以利用這一點來進行“tree-shaking”并將用不到的代碼排除出最終的包。 >[danger] ##### 通過構建工具打包 1. 基于 **Vue-CLI** 創建的項目默認為**運行時版本且使用ESM構建文件** 即 **vue.runtime.esm.js** ，可以在命令中端輸入**vue inspect > output.js** 可以查看webpack的配置, 并將配置文件內容其輸出到output.js文件 2. webpack打包時候使用**vue-loader**，在打包時候會將`.vue`文件，提取出其中的邏輯代碼 script、樣式代碼 style、以及 HTML 模版 template，再分別把它們交給對應的 Loader 去處理，并且將**template轉換為render函數**,`*.vue `文件中的模板是在構建時預編譯的，最終打包后的結果**不需要編譯器(都已經在編譯期間轉換了)，因此只需要運行環境** * Runtime + Compiler vs. Runtime-only ~~~ // Compiler // 需要編譯器（即vue完整版 或使用打包工具），把 template 轉換成 render 函數 ， // const vm = new Vue({ // el: '#app', // template: '<h1>{{ msg }}</h1>', // data: { // msg: 'Hello Vue' // } // }) // Runtime // 不需要編譯器 ，因為template =》render 函數變為js const vm = new Vue({ el: '#app', render (h) { return h('h1', this.msg) }, data: { msg: 'Hello Vue' } }) ~~~ >[info] ## Vue 常見名詞解釋 常說`數據響應式`、`雙向綁定`、`數據驅動` 這三個名詞的解釋 1. **數據響應式**,數據模型僅僅是普通的 JS 對象，當修改數據時，視圖會進行更新，避免了繁瑣的 DOM 操作，提高開發效率 2. **雙向綁定**,數據改變，視圖改變；視圖改變，數據也隨之改變,可以使用 v-model 在表單元素上創建雙向數據綁定 3. **數據驅動**是 Vue 最獨特的特性之一 MVVM框架優勢,開發過程中僅需關注數據本身，不需要關心數據如何渲染到視圖 >[danger] ##### Vue數據響應的核心原理 1. Vue2.x 系列是如何做到當修改數據時候視圖會進行更新？ * 答：當你把一個普通的 JavaScript 對象傳入 Vue 實例作為 data 選項，**Vue 將遍歷此對象所有的 property**，并使用Object.defineProperty 把這些 property **全部轉為 getter/setter**。Object.defineProperty 是 **ES5 中一個無法shim(無法降級處理) 的特性**，這也就是 **Vue 不支持 IE8** 以及更低版本瀏覽器的原因。 [官網解釋鏈接](https://cn.vuejs.org/v2/guide/reactivity.html)