1.Vue 知識體系
1.1 基礎(chǔ)原理1.1.1 Vnode
Vnode也稱虛擬node節(jié)點(diǎn),是對真實(shí)元素的抽象。誕生的背景是因?yàn)榍岸嗽诤荛L一段時間通過直接操作Dom來達(dá)到修改視圖，隨著項(xiàng)目龐大，維護(hù)就變成一個問題。那換個角度想如果把真實(shí)Dom樹抽象成為一棵以JS語法構(gòu)建的抽象，然后通過修改抽象樹的結(jié)構(gòu)來轉(zhuǎn)換成真實(shí)的Dom來重新渲染到視圖。
如何生成虛擬節(jié)點(diǎn)？
Vnode如何檢測變化并更新視圖呢？ diff算法
VNode節(jié)點(diǎn)及Vuejs中VNode類的定義
Vue實(shí)現(xiàn)的diff原理
1.1.2 nextTick
nextTick目的是將回調(diào)函數(shù)的調(diào)用延遲到下一次dom更新數(shù)據(jù)后，換句話說就是修改數(shù)據(jù)后并不會立即更新dom ，因?yàn)閐om的更新是異步的，無法通過同步代碼獲取，需要使用nextTick，在下一次事件循環(huán)中獲?。╒ue中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等都不應(yīng)該處理數(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é)合設(shè)計模式中的發(fā)布者-訂閱者模式，主要包括以下步驟
1.將數(shù)據(jù)data變成可觀察： 通過 Object.defineProperty()設(shè)置屬性的setter和getter來監(jiān)聽數(shù)據(jù)的變化，通過getter進(jìn)行依賴收集，而每個setter方法就是一個觀察者，關(guān)于更多的Object.defineProperty()實(shí)踐可以閱讀 樹醬的如何更好管理 Api 接口 中有提到 （ Vue3.0 使用Proxy替代）
2.添加訂閱者Watcher和添加消息訂閱器Dep（ 如果數(shù)據(jù)變化，通知所有訂閱者）
3.實(shí)現(xiàn)Compile
基于 Proxy 的觀察者機(jī)制探索
1.1.5 Vue相關(guān)的API
Vue暴露一些常用的API，包括全局、生命周期、組合、實(shí)例property等API，可以查看vue官方所有API集合文檔
全局 API ：比如 Vue.use( plugin )用于全局引用插件, 具體使用可閱讀樹醬的
組合 API: 比如 project/inject 用于允許祖先組件向其所有子孫后代注入一個依賴
實(shí)例property API: 比如vm.$refs 獲取持有注冊過ref屬性的所有 DOM 元素和組件實(shí)例
你或許不知道Vue的這些小技巧
1.2 vuex 狀態(tài)管理
Vuex 是一個專為 Vue.js 應(yīng)用開發(fā)的狀態(tài)管理工具，采用集中式的存儲方法來記錄組件的狀態(tài)，用一個對象就包含了全部的應(yīng)用層級狀態(tài)，而每個應(yīng)用將僅僅包含一個 store 實(shí)例，但是可以用模塊化來管理區(qū)分
1.2.1 模塊化狀態(tài)化管理
由于vuex的單一狀態(tài)樹，會導(dǎo)致說隨著應(yīng)用龐大，應(yīng)用要管理狀態(tài)集合會很大，store 對象就會顯得臃腫，難以管理，那就需要用到Module區(qū)分，每個Module都擁有自己的 state、mutation、action、getter
1.2.2 持久化管理
我們可以使用狀態(tài)持久化來實(shí)現(xiàn)緩存狀態(tài)，因?yàn)関uex的數(shù)據(jù)是存放在內(nèi)存中，當(dāng)我們刷新頁面的時候，內(nèi)存會被刪除，如果我們想持久化存儲一些數(shù)據(jù)，就需要依賴 localstorge或者vuex-persistedstate
手動利用HTML5的本地存儲（localstorge）
使用vuex-persistedstate插件
注意: 默認(rèn)情況下每次 commit 都會向 localstorage 寫入數(shù)據(jù)，localstorage 寫入是同步的，這樣對性能存在影響，應(yīng)該分場景盡量避免頻繁寫入持久化數(shù)據(jù)。
1.2.3 vuex 五種屬性
state：vuex的基本數(shù)據(jù)，用來存儲變量
getter：從基本數(shù)據(jù)(state)派生的數(shù)據(jù)，相當(dāng)于state的計算屬性
mutation：提交更新數(shù)據(jù)的方法，必須是同步的(如果需要異步使用action)。
action：Action 提交的是 mutation，并且可以包含任意異步操作，但不能直接變更狀態(tài)
modules：1.2.1 章節(jié)提到的vuex模塊化
1.3 vue-router
SPA應(yīng)用大多由前端路由來控制頁面的跳轉(zhuǎn)，通過url的切換，在不請求服務(wù)器的前提，更新頁面視圖，vue應(yīng)用離不開vue-router,涉及知識內(nèi)容包括以下幾點(diǎn)
hash模式和history模式有什么不同？
路由攔截應(yīng)該怎么做？
路由如何實(shí)現(xiàn)模塊化管理？
keep-alive如何對組件進(jìn)行緩存？
前端路由那些事
vue 路由 按需 keep-alive
1.4 組件開發(fā)
Vue組件開發(fā)是為了通過從業(yè)務(wù)代碼中解耦出代碼復(fù)用率高的片段，抽出并封裝為高復(fù)用的組件、涉及知識內(nèi)容包括以下幾點(diǎn)
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)容的出口，簡單理解就是“占坑”，子組件預(yù)先把位置占好，然后根據(jù)業(yè)務(wù)場景需要，子組件在編寫相應(yīng)的
1.4.3 Mixin 混入
mixin提供了一種非常靈活的方式，可以用來分發(fā)Vue組件中的可復(fù)用功能，借助Mixin多個組件可以共享數(shù)據(jù)和方法。同時引入mixin的組件，mixin中的方法和屬性也就并入到該組件中，可以直接使用。鉤子函數(shù)也將會在兩個都被調(diào)用（Mixin中的鉤子會先執(zhí)行）
1.4.4 高階組件
高階組件也稱為HOC，它被描述為一種在組件之間共享公共功能而不需要重復(fù)代碼的方法。作用在于增強(qiáng)組件的功能，簡單定義就是：你向一個方法傳入組件，然后返回一個新的組件，這就是一個HOC
探索Vue高階組件
Vue HOC 高階組件 實(shí)踐
1.5 axios
應(yīng)用離不開請求庫，而vue技術(shù)棧中請求庫談及最多的，非axios莫屬，axios 是一個基于Promise 用于瀏覽器和 nodejs 的 HTTP 客戶端，涉及知識內(nèi)容包括以下幾點(diǎn)
axios 如何做二次封裝（攔截器）？
如何結(jié)合axios做API管理 ？
axios 如何取消請求？
token過期如何在axios刷新？
封裝 axios 攔截器實(shí)現(xiàn)用戶無感刷新 access_token
1.6 vue-cli
vue-cli是vue官方的腳手架，可以使用Vue-cli來快速構(gòu)建項(xiàng)目，且對 Babel、TypeScript、ESLint、單元測試等提供了開箱即用的支持，簡化了部署、打包、代碼掃描、單元測試等流程，涉及知識內(nèi)容包括以下幾點(diǎn)
如何基于vue-cli部署項(xiàng)目？
如何配置vue.config.js 打包性能最佳應(yīng)用？
本地開發(fā)跨域如何解決？
1.6.1 vue-cli 部署項(xiàng)目
前端部署離不開幾個環(huán)境包括本地、mock、開發(fā)、測試、預(yù)生產(chǎn)、生產(chǎn)等等，需要根據(jù)不同環(huán)境定義不同的配置文件（管理api等），還需要定義好編譯腳本（packjson中的scripts），還需要注意publicpath的定義是否需要修改?
1.6.2 配置最佳打包
前端SPA應(yīng)用上線服務(wù)器本質(zhì)上是編譯好的靜態(tài)資源上傳，那編譯打包就是影響性能較大的因素，那么如何配置vue.config.js打包性能最佳，可以閱讀第4節(jié)的webpack配置插件，主要解決這幾個問題
針對請求數(shù)進(jìn)行優(yōu)化: (去除prefetch)
公用代碼提取，使用cdn加載: (config.externals)
配置代碼壓縮
1.6.3 本地開發(fā)devServer
本地開發(fā)中存在跨域問題？我們可以通過vue.config.js中devServer配置來做反響代理解決！如何做？看下面這篇
2.工程化知識體系
關(guān)于前端工程化，本質(zhì)上是通過規(guī)范和工具來提高前端應(yīng)用質(zhì)量
2.1 Git
眾所周知，git不單單只是代碼管理工具，還可以做分支管理、commit message檢驗(yàn)、Pull Request等
2.2 Npm
只會npm install? npm其實(shí)提供很多功能包括如下幾個常用的
npm publish ：發(fā)包管理
npm link ：用來在本地項(xiàng)目和本地npm模塊之間建立連接，可以在本地進(jìn)行模塊測試
13 個 npm 快速開發(fā)技巧
2.3 構(gòu)建工具
前端項(xiàng)目構(gòu)建工具很多包括Rollup、Webpack、Parcel，然而最近在Vue.js 3.0 Beta里，尤大大提到他在做的這個小工具 vite，關(guān)于vite是否能替代wepack？
Webpack：適?于?型項(xiàng)目構(gòu)建：webpack目前生態(tài)最完善，應(yīng)用場景更多，社區(qū)人氣高，有強(qiáng)?的loader和插件?態(tài)
Rollup：適?于工具庫的打包: 可以將各個模塊打包進(jìn)?個?件中，具備 Tree-shaking 來刪除??的代碼,降低代碼體積,但是不具備webpack強(qiáng)大的插件生態(tài)，定位更適用于聚焦于庫的打包
Parcel：適?于試驗(yàn): 雖然無配置的優(yōu)勢，可以快速打包應(yīng)用，且打包效率，但是不具備Tree-shaking，導(dǎo)致輸出文件偏大
2.4 CI/CD 和項(xiàng)目部署
自從有了DevOps，持續(xù)集成，持續(xù)交付（CI/CD）成了項(xiàng)目部署主流，前端SPA項(xiàng)目部署需要打包應(yīng)用，我們可以結(jié)合 Jenkins + Docker + Nginx 來完成，如果是SSR應(yīng)用還需要用PM2來管理進(jìn)程
3 Node知識體系
4.性能優(yōu)化4.1 性能指標(biāo)
性能指標(biāo)是用來通過獲取數(shù)據(jù)來衡量應(yīng)用的性能，并通過數(shù)據(jù)來體現(xiàn)出性能的好壞，常用的性能指標(biāo)有以下幾種
我們也可以通過lighthouse這個工具來測試下我們當(dāng)前的應(yīng)用
FCP: 首次內(nèi)容繪制
FMP:首次有效繪制
TTI：首次可交互時間
下通過頁面一個手機(jī)頁面加載截圖來幫助我們理解性能指標(biāo)時間點(diǎn)所帶來的體驗(yàn)
4.2 webpack4.2.1 代碼分割
在業(yè)務(wù)場景中，項(xiàng)目中可能會引入很多第三方庫，這些庫可能跟業(yè)務(wù)無關(guān)且內(nèi)容也可能不變，如果都打包到一起，那么用戶通過瀏覽器想要瀏覽最新效果就必須重新執(zhí)行完新的文件，如果能把不變的代碼都單獨(dú)打成一個文件，且文件名每次都一樣。那么瀏覽器可以從緩存中讀取，而不是重新發(fā)起請求，或者將公共部分去重，那這個時候代碼分割就起了個重要的作用
