1.Vue 知識體系
1.1 基礎原理1.1.1 Vnode
Vnode也稱虛擬node節(jié)點,是對真實元素的抽象。誕生的背景是因為前端在很長一段時間通過直接操作Dom來達到修改視圖漂羊，隨著項目龐大檩赢，維護就變成一個問題死讹。那換個角度想如果把真實Dom樹抽象成為一棵以JS語法構(gòu)建的抽象，然后通過修改抽象樹的結(jié)構(gòu)來轉(zhuǎn)換成真實的Dom來重新渲染到視圖。
如何生成虛擬節(jié)點？
Vnode如何檢測變化并更新視圖呢顽频？ diff算法
VNode節(jié)點及Vuejs中VNode類的定義
Vue實現(xiàn)的diff原理
1.1.2 nextTick
nextTick目的是將回調(diào)函數(shù)的調(diào)用延遲到下一次dom更新數(shù)據(jù)后，換句話說就是修改數(shù)據(jù)后并不會立即更新dom 太闺，因為dom的更新是異步的糯景，無法通過同步代碼獲取，需要使用nextTick省骂，在下一次事件循環(huán)中獲润盎础（Vue中Dom的更新是異步的）
this.msg = "Hello world." this.$nextTick(() => { this.msg2 = this.$refs.msgDiv.innerHTML }) ?? this.msg3 = this.$refs.msgDiv.innerHTML
1.1.3 MVVM
MVVM全稱為：Model-View-View-Model，誕生背景是在傳統(tǒng)的MVC架構(gòu)中钞澳，缺少一個數(shù)據(jù)解析的角色怠惶，而M、V轧粟、C等都不應該處理數(shù)據(jù)解析甚疟，于是專門為數(shù)據(jù)解析的就誕生了一個新的類：ViewModel，主要用于將Model和View關(guān)聯(lián)起來逃延，數(shù)據(jù)變化更新視圖，視圖變化更新數(shù)據(jù)
1.1.4 雙向綁定原理
上一節(jié)提到mvvm,本質(zhì)上就是vue數(shù)據(jù)雙向綁定轧拄，它是通過數(shù)據(jù)劫持結(jié)合設計模式中的發(fā)布者-訂閱者模式揽祥，主要包括以下步驟
1.將數(shù)據(jù)data變成可觀察： 通過 Object.defineProperty()設置屬性的setter和getter來監(jiān)聽數(shù)據(jù)的變化，通過getter進行依賴收集檩电，而每個setter方法就是一個觀察者拄丰，關(guān)于更多的Object.defineProperty()實踐可以閱讀 樹醬的如何更好管理 Api 接口 中有提到 （ Vue3.0 使用Proxy替代）
2.添加訂閱者Watcher和添加消息訂閱器Dep（ 如果數(shù)據(jù)變化，通知所有訂閱者）
3.實現(xiàn)Compile
基于 Proxy 的觀察者機制探索
1.1.5 Vue相關(guān)的API
Vue暴露一些常用的API俐末，包括全局料按、生命周期、組合卓箫、實例property等API载矿，可以查看vue官方所有API集合文檔
全局 API ：比如 Vue.use( plugin )用于全局引用插件, 具體使用可閱讀樹醬的
組合 API: 比如 project/inject 用于允許祖先組件向其所有子孫后代注入一個依賴
實例property API: 比如vm.$refs 獲取持有注冊過ref屬性的所有 DOM 元素和組件實例
你或許不知道Vue的這些小技巧
1.2 vuex 狀態(tài)管理
Vuex 是一個專為 Vue.js 應用開發(fā)的狀態(tài)管理工具，采用集中式的存儲方法來記錄組件的狀態(tài)烹卒，用一個對象就包含了全部的應用層級狀態(tài)闷盔，而每個應用將僅僅包含一個 store 實例弯洗，但是可以用模塊化來管理區(qū)分
1.2.1 模塊化狀態(tài)化管理
由于vuex的單一狀態(tài)樹，會導致說隨著應用龐大逢勾，應用要管理狀態(tài)集合會很大牡整，store 對象就會顯得臃腫，難以管理溺拱，那就需要用到Module區(qū)分逃贝，每個Module都擁有自己的 state、mutation迫摔、action沐扳、getter
1.2.2 持久化管理
我們可以使用狀態(tài)持久化來實現(xiàn)緩存狀態(tài)，因為vuex的數(shù)據(jù)是存放在內(nèi)存中攒菠，當我們刷新頁面的時候迫皱，內(nèi)存會被刪除，如果我們想持久化存儲一些數(shù)據(jù)辖众，就需要依賴 localstorge或者vuex-persistedstate
手動利用HTML5的本地存儲（localstorge）
使用vuex-persistedstate插件
注意: 默認情況下每次 commit 都會向 localstorage 寫入數(shù)據(jù)卓起，localstorage 寫入是同步的，這樣對性能存在影響凹炸，應該分場景盡量避免頻繁寫入持久化數(shù)據(jù)戏阅。
1.2.3 vuex 五種屬性
state：vuex的基本數(shù)據(jù)，用來存儲變量
getter：從基本數(shù)據(jù)(state)派生的數(shù)據(jù)啤它，相當于state的計算屬性
mutation：提交更新數(shù)據(jù)的方法奕筐，必須是同步的(如果需要異步使用action)。
action：Action 提交的是 mutation变骡，并且可以包含任意異步操作离赫，但不能直接變更狀態(tài)
modules：1.2.1 章節(jié)提到的vuex模塊化
1.3 vue-router
SPA應用大多由前端路由來控制頁面的跳轉(zhuǎn)，通過url的切換塌碌，在不請求服務器的前提渊胸，更新頁面視圖，vue應用離不開vue-router,涉及知識內(nèi)容包括以下幾點
hash模式和history模式有什么不同台妆？
路由攔截應該怎么做翎猛？
路由如何實現(xiàn)模塊化管理？
keep-alive如何對組件進行緩存接剩？
前端路由那些事
vue 路由 按需 keep-alive
1.4 組件開發(fā)
Vue組件開發(fā)是為了通過從業(yè)務代碼中解耦出代碼復用率高的片段切厘，抽出并封裝為高復用的組件、涉及知識內(nèi)容包括以下幾點
Vue 組件的三個重要因是什么懊缺？ props疫稿、事件 和 slots
組件間是如何通信的？
Vue組件化之插槽slot如何使用？
mixin 在組件中可以起到什么作用而克？
Vue高階組件是什么靶壮？
1.4.1 組件間通信和傳值
Vue組件的通信可以是：子父關(guān)系，也可以是子祖關(guān)系员萍、兄弟關(guān)系腾降。不同的的關(guān)系也就意味方式不同，主要包括以下幾種方式：
$parent與$children
$emit
bus $eventBus: 事件總線碎绎，通過emit和gif on來完成傳遞接收
provide與inject
props 與 $refs
1.4.2 Slot 插槽
來自Vue官方介紹：slot元素作為承載分發(fā)內(nèi)容的出口螃壤，簡單理解就是“占坑”，子組件預先把位置占好筋帖，然后根據(jù)業(yè)務場景需要奸晴，子組件在編寫相應的
1.4.3 Mixin 混入
mixin提供了一種非常靈活的方式，可以用來分發(fā)Vue組件中的可復用功能日麸，借助Mixin多個組件可以共享數(shù)據(jù)和方法寄啼。同時引入mixin的組件，mixin中的方法和屬性也就并入到該組件中代箭，可以直接使用墩划。鉤子函數(shù)也將會在兩個都被調(diào)用（Mixin中的鉤子會先執(zhí)行）
1.4.4 高階組件
高階組件也稱為HOC，它被描述為一種在組件之間共享公共功能而不需要重復代碼的方法嗡综。作用在于增強組件的功能乙帮，簡單定義就是：你向一個方法傳入組件，然后返回一個新的組件极景，這就是一個HOC
探索Vue高階組件
Vue HOC 高階組件 實踐
1.5 axios
應用離不開請求庫察净，而vue技術(shù)棧中請求庫談及最多的，非axios莫屬盼樟，axios 是一個基于Promise 用于瀏覽器和 nodejs 的 HTTP 客戶端氢卡，涉及知識內(nèi)容包括以下幾點
axios 如何做二次封裝（攔截器）？
如何結(jié)合axios做API管理 晨缴？
axios 如何取消請求异吻？
token過期如何在axios刷新？
封裝 axios 攔截器實現(xiàn)用戶無感刷新 access_token
1.6 vue-cli
vue-cli是vue官方的腳手架喜庞，可以使用Vue-cli來快速構(gòu)建項目，且對 Babel棋返、TypeScript延都、ESLint、單元測試等提供了開箱即用的支持睛竣，簡化了部署晰房、打包、代碼掃描、單元測試等流程殊者，涉及知識內(nèi)容包括以下幾點
如何基于vue-cli部署項目与境？
如何配置vue.config.js 打包性能最佳應用？
本地開發(fā)跨域如何解決猖吴？
1.6.1 vue-cli 部署項目
前端部署離不開幾個環(huán)境包括本地摔刁、mock、開發(fā)海蔽、測試共屈、預生產(chǎn)、生產(chǎn)等等党窜，需要根據(jù)不同環(huán)境定義不同的配置文件（管理api等）拗引，還需要定義好編譯腳本（packjson中的scripts），還需要注意publicpath的定義是否需要修改?
1.6.2 配置最佳打包
前端SPA應用上線服務器本質(zhì)上是編譯好的靜態(tài)資源上傳幌衣，那編譯打包就是影響性能較大的因素矾削，那么如何配置vue.config.js打包性能最佳，可以閱讀第4節(jié)的webpack配置插件豁护，主要解決這幾個問題
針對請求數(shù)進行優(yōu)化: (去除prefetch)
公用代碼提取哼凯，使用cdn加載: (config.externals)
配置代碼壓縮
1.6.3 本地開發(fā)devServer
本地開發(fā)中存在跨域問題？我們可以通過vue.config.js中devServer配置來做反響代理解決择镇！如何做挡逼？看下面這篇
2.工程化知識體系
關(guān)于前端工程化，本質(zhì)上是通過規(guī)范和工具來提高前端應用質(zhì)量
2.1 Git
眾所周知腻豌，git不單單只是代碼管理工具家坎，還可以做分支管理、commit message檢驗吝梅、Pull Request等
2.2 Npm
只會npm install? npm其實提供很多功能包括如下幾個常用的
npm publish ：發(fā)包管理
npm link ：用來在本地項目和本地npm模塊之間建立連接虱疏，可以在本地進行模塊測試
13 個 npm 快速開發(fā)技巧
2.3 構(gòu)建工具
前端項目構(gòu)建工具很多包括Rollup、Webpack苏携、Parcel做瞪，然而最近在Vue.js 3.0 Beta里，尤大大提到他在做的這個小工具 vite右冻，關(guān)于vite是否能替代wepack装蓬？
Webpack：適?于?型項目構(gòu)建：webpack目前生態(tài)最完善，應用場景更多纱扭，社區(qū)人氣高牍帚，有強?的loader和插件?態(tài)
Rollup：適?于工具庫的打包: 可以將各個模塊打包進?個?件中，具備 Tree-shaking 來刪除??的代碼,降低代碼體積,但是不具備webpack強大的插件生態(tài)乳蛾，定位更適用于聚焦于庫的打包
Parcel：適?于試驗: 雖然無配置的優(yōu)勢暗赶，可以快速打包應用鄙币，且打包效率，但是不具備Tree-shaking蹂随，導致輸出文件偏大
2.4 CI/CD 和項目部署
自從有了DevOps十嘿，持續(xù)集成，持續(xù)交付（CI/CD）成了項目部署主流岳锁，前端SPA項目部署需要打包應用绩衷，我們可以結(jié)合 Jenkins + Docker + Nginx 來完成，如果是SSR應用還需要用PM2來管理進程
3 Node知識體系
4.性能優(yōu)化4.1 性能指標
性能指標是用來通過獲取數(shù)據(jù)來衡量應用的性能浸锨，并通過數(shù)據(jù)來體現(xiàn)出性能的好壞唇聘，常用的性能指標有以下幾種
我們也可以通過lighthouse這個工具來測試下我們當前的應用
FCP: 首次內(nèi)容繪制
FMP:首次有效繪制
TTI：首次可交互時間
下通過頁面一個手機頁面加載截圖來幫助我們理解性能指標時間點所帶來的體驗
4.2 webpack4.2.1 代碼分割
在業(yè)務場景中，項目中可能會引入很多第三方庫柱搜，這些庫可能跟業(yè)務無關(guān)且內(nèi)容也可能不變迟郎，如果都打包到一起，那么用戶通過瀏覽器想要瀏覽最新效果就必須重新執(zhí)行完新的文件聪蘸，如果能把不變的代碼都單獨打成一個文件宪肖，且文件名每次都一樣。那么瀏覽器可以從緩存中讀取健爬，而不是重新發(fā)起請求控乾，或者將公共部分去重，那這個時候代碼分割就起了個重要的作用
