>[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)
- 工程化 -- Node
- vscode -- 插件
- vscode -- 代碼片段
- 前端學會調試
- 谷歌瀏覽器調試技巧
- 權限驗證
- 包管理工具 -- npm
- 常見的 npm ci 指令
- npm -- npm install安裝包
- npm -- package.json
- npm -- 查看包版本信息
- npm - package-lock.json
- npm -- node_modules 層級
- npm -- 依賴包規則
- npm -- install 安裝流程
- npx
- npm -- 發布自己的包
- 包管理工具 -- pnpm
- 模擬數據 -- Mock
- 頁面渲染
- 渲染分析
- core.js && babel
- core.js -- 到底是什么
- 編譯器那些術語
- 詞法解析 -- tokenize
- 語法解析 -- ast
- 遍歷節點 -- traverser
- 轉換階段、生成階段略
- babel
- babel -- 初步上手之了解
- babel -- 初步上手之各種配置(preset-env)
- babel -- 初步上手之各種配置@babel/helpers
- babel -- 初步上手之各種配置@babel/runtime
- babel -- 初步上手之各種配置@babel/plugin-transform-runtime
- babel -- 初步上手之各種配置(babel-polyfills )(未來)
- babel -- 初步上手之各種配置 polyfill-service
- babel -- 初步上手之各種配置(@babel/polyfill )(過去式)
- babel -- 總結
- 各種工具
- 前端 -- 工程化
- 了解 -- Yeoman
- 使用 -- Yeoman
- 了解 -- Plop
- node cli -- 開發自己的腳手架工具
- 自動化構建工具
- Gulp
- 模塊化打包工具為什么出現
- 模塊化打包工具(新) -- webpack
- 簡單使用 -- webpack
- 了解配置 -- webpack.config.js
- webpack -- loader 淺解
- loader -- 配置css模塊解析
- loader -- 圖片和字體(4.x)
- loader -- 圖片和字體(5.x)
- loader -- 圖片優化loader
- loader -- 配置解析js/ts
- webpack -- plugins 淺解
- eslit
- plugins -- CleanWebpackPlugin(4.x)
- plugins -- CleanWebpackPlugin(5.x)
- plugin -- HtmlWebpackPlugin
- plugin -- DefinePlugin 注入全局成員
- webapck -- 模塊解析配置
- webpack -- 文件指紋了解
- webpack -- 開發環境運行構建
- webpack -- 項目環境劃分
- 模塊化打包工具 -- webpack
- webpack -- 打包文件是個啥
- webpack -- 基礎配置項用法
- webpack4.x系列學習
- webpack -- 常見loader加載器
- webpack -- 移動端px轉rem處理
- 開發一個自己loader
- webpack -- plugin插件
- webpack -- 文件指紋
- webpack -- 壓縮css和html構建
- webpack -- 清里構建包
- webpack -- 復制靜態文件
- webpack -- 自定義插件
- wepack -- 關于靜態資源內聯
- webpack -- source map 對照包
- webpack -- 環境劃分構建
- webpack -- 項目構建控制臺輸出
- webpack -- 項目分析
- webpack -- 編譯提速優護體積
- 提速 -- 編譯階段
- webpack -- 項目優化
- webpack -- DefinePlugin 注入全局成員
- webpack -- 代碼分割
- webpack -- 頁面資源提取
- webpack -- import按需引入
- webpack -- 搖樹
- webpack -- 多頁面打包
- webpack -- eslint
- webpack -- srr打包后續看
- webpack -- 構建一個自己的配置后續看
- webpack -- 打包組件和基礎庫
- webpack -- 源碼
- webpack -- 啟動都做了什么
- webpack -- cli做了什么
- webpack - 5
- 模塊化打包工具 -- Rollup
- 工程化搭建代碼規范
- 規范化標準--Eslint
- eslint -- 擴展配置
- eslint -- 指令
- eslint -- vscode
- eslint -- 原理
- Prettier -- 格式化代碼工具
- EditorConfig -- 編輯器編碼風格
- 檢查提交代碼是否符合檢查配置
- 整體流程總結
- 微前端
- single-spa
- 簡單上手 -- single-spa
- 快速理解systemjs
- single-sap 不使用systemjs
- monorepo -- 工程
- Vue -- 響應式了解
- Vue2.x -- 源碼分析
- 發布訂閱和觀察者模式
- 簡單 -- 了解響應式模型(一)
- 簡單 -- 了解響應式模型(二)
- 簡單 --了解虛擬DOM(一)
- 簡單 --了解虛擬DOM(二)
- 簡單 --了解diff算法
- 簡單 --了解nextick
- Snabbdom -- 理解虛擬dom和diff算法
- Snabbdom -- h函數
- Snabbdom - Vnode 函數
- Snabbdom -- init 函數
- Snabbdom -- patch 函數
- 手寫 -- 虛擬dom渲染
- Vue -- minVue
- vue3.x -- 源碼分析
- 分析 -- reactivity
- 好文
- grpc -- 瀏覽器使用gRPC
- grcp-web -- 案例
- 待續