1.VUE的宣告週期有哪些及每個生命週期做了什麼
beforeCreate: 是new Vue() 之後觸發的第一個鉤子，data,methods,computed 以及watch 上的資料和方法都不能被訪問
created: 在例項建立完成後發生，可以做一些初始化資料的獲取，在當前階段無法與Dom 進行互動，如果非要可以透過vm.$nextTick 來訪問。
beforeMounted: 發生在掛載之前，template模版匯入渲染函式編譯，虛擬Dom已經建立完成，即將開始渲染
mounted:在掛載完成後發生，在當前階段，真實的Dom 掛載完畢，資料完成雙向繫結，可以訪問到Dom 節點，使用$ref屬性對Dom 進行操作。
beforeUpdate: 發生在更新之前，也就是響應資料發生更新，虛擬Dom 重新渲染之前被觸發，可以在當前階段進行更改資料，不會造成重新渲染。
updated: 發生在更新完成之後，元件Dom 已完成更新，避免在此期間更改資料，可能會導致資料的萬縣迴圈更新。
beforeDestroy : 發生在例項銷燬之前，在當前階段例項完全可以被使用，在這個階段可以完成善後工作，比如清除定時器。
destroyed: 發生在銷燬之後，這個階段只剩下Dom空殼，元件已經被拆解，資料繫結陪卸除，監聽被移除，子例項被銷燬。
2.vue 響應式原理是什麼？ Vue3 響應式有什麼不同
vue 在初始化的時候會使用Object.defineProperty 重新定義data中的所有屬性，當頁面呼叫對應的屬性的時候，會進行依賴收集
如果屬性發生變化會通知相關的依賴進行更新操作(釋出訂閱)。
Vue3.x 改用Proxy 替代Object.definedProperty,Proxy 可以直接監聽物件和陣列的變化。
3.vue3和vue2的別去
原始碼組織方式變化：使用TS 重新。
支援Composition API 基於函式的API 更加靈活組織元件邏輯。
響應式系統提升:Vue3 採用的是proxy,可動態新增刪除屬性，及資料變化
編譯最佳化：vue2透過標記靜態跟節點最佳化diff,vue3標記和提升所有靜態根節點，diff 的時候只需對比動態節點內容。
打包體積的最佳化：移除了一些不常用的api,例如：filter
生命週期的最佳化：使用setup代替了之前的beforeCreate和created
vue3的template 標籤支援多個根標籤。
vuex 狀態 管理：建立例項的方式不同，vue2為new Store,vue3為createStore
Route 獲取頁面例項與路由資訊：vue2 透過this 獲取router 獲取 例項，vue3 透過使用getCurrentInstance/userRoute和userRouter獲取當前元件例項
Props 的變化；vue2 透過this 獲取props 裡面的內容，vue3直接透過props
4.對MVVM 的理解
就是把MVC 中的Controller 演變成了ViewModel ,Model 層代表資料模型，View代表UI元件，viewModel 是view和model 層的橋樑
資料會繫結到viewModel 並自動渲染到頁面中，檢視的變化時會通知viewModel 層更新資料。
5.v-model 雙向繫結的原理是什麼
v-model 本質是一個語法糖，可以看成是value+input 方法的語法糖，可以透過model 屬性的prop 和envent 屬性進行自定義，原生的
標籤會根據生成不同的事件和屬性。
6.vue2.x和vue3.x 渲染的diff 演算法
diff 演算法有以下過程
同級比較，在比較子節點
先判斷一方有子節點一方沒有子節點的情況(如果新的children沒有子節點，將就的子節點移除)比較都有子幾點的情況
遞迴比較子節點
vue2 的核心Diff 演算法採用了雙端比較演算法。
vue3 借鑑了 ivi 演算法和inferno 演算法。
7.vue 元件通訊方式有哪些及原理
父子元件通訊，
父->子 props 子->父 $on,$emit 獲取父子元件的例項$parent,$children
Ref 獲取例項的方式呼叫元件的屬性或者方法。
Provide,inject 依賴注入的形式，兄弟元件的方式 Bus 跨級元件通訊 Vuex
8.hash 路由和history 路由
location.hash 的值實際上就是 # 後面的
history 實際上是採用了HTML5中提供的api 來實現的 主要有history.pushState() 和history.replaceState()
9.keep-alive 的常用屬性有哪些
keep-alive 可以實現元件快取 ，當元件切換時不會對當前元件進行解除安裝
常用的兩個屬性 include/exclude 允許元件有條件的進行快取
兩個宣告週期 activated/deactivated 用來得知當前元件是否處於活躍狀態
keep-alive 還運用了LRU 演算法
10.nextTick 的作用是什麼
在下次DOM 更新迴圈結束之後執行延遲迴調，nextTick 主要是使用了宏觀任務和微觀任務。
定義了一個非同步方法，多次呼叫nextTick 會將方法存入佇列中，透過這個非同步方法情況當前佇列。
11. vue complier 的實現原理是什麼
complier 的主要作用是解析模版，生成渲染模版的render,而render 的主要作用是為了生成VNode
complier 主要分為3 大塊
parse: 接授template 原始模版，按著模版的節點和資料生成對應的ast
optimize: 遍歷ast的每一個節點，標記靜態節點，這樣就知道哪部分不會變化，於是在頁面需要更新時，透過diff 減少去對比DOM ，提升效能。
generate:把前兩步生成完善的ast,組成render 字串，然後將render 字串透過new Function 的方式轉換成渲染函式。
12.watch 與 computed 的區別
都是觀察資料變化的
計算屬性將會混入到 vue 的例項中，所需要監聽自定義變數；watch 監聽data,props 裡面的資料的變化
computed 有快取，他依賴的值變了才會重新計算 watch 沒有。
watch 支援非同步，computed 不支援；
watch 是一對多（監聽某一個值變化，執行對應操作），computed 是多對一（監聽屬性依賴與其他屬性）
watch 監聽函式接收兩個引數，第一個是最新值，第二個是輸入之前的值。
computed 屬性是函式的時，都有get和set 方法，預設走get方法 get 必須有返回值。
13.vue 修飾符有哪些
|
事件修飾符
|
.stop:防止冒泡，.prevent: 防止預設事件，.capture:使用事件捕獲模式，.self 只在當前元素本身觸發，.once：只出一次，.passlve: 預設行為將會立即觸發
|
|
按鍵修飾符
|
.left,.right,.moddle,.enter,.tab,.delete,.esc,.space,.up,.down,.left,.right,.ctrl,.alt,.shift,.meta
|
|
表單修飾符
|
.lazy,.number,trim
|
14.vue專案中的效能最佳化
|
編碼階段
|
儘量減少data 中的資料 ，data中的資料會增加 getter 和setter ,v-if 和v-for 不能連用
spa 頁面儘量採用 keep-alive 快取元件 ，key 保證唯一，使用懶載入路由非同步元件，第三方模組按需匯入，長列表滾動到可視區動態載入，圖片懶載入。
|
|
打包階段
|
壓縮程式碼，Tree Shaking/Scope Holsting 使用cdn 載入第三方模組， 多執行緒打包 happypack
splitChunks 抽離公共檔案，sourceMap 最佳化
|
|
使用者體驗
|
骨架屏 PWA
|
15.vue 中的spa 應用如何最佳化首屏載入速度
|
請求最佳化
|
將第三方的庫放到CDN 上，能夠大幅度減少生產環境中的專案體積，CDN 能夠實時根據網路流量和各個節點的連線，負載均衡及到使用者的距離。
|
|
快取
|
將長時間不會改變的的第三方庫或者靜態資源設定為強快取，將max-age 設定為一個非常長的時間，好的快取策略有助於減輕伺服器的壓力。
|
|
gzip
|
開啟gzip 壓縮，通常開始前gzip 壓縮能夠有效的縮小傳輸資源的大小
|
|
http2
|
如果首屏載入的靜態資源非常的多，瀏覽器對同域名的tcp 連線數量是有限的 chrome為6個
|
|
懶載入
|
當url 匹配到相應的路徑的時候，透過import 動態載入頁面元件，這樣首屏的程式碼量會大幅度減少
|
|
預渲染
|
可以新增loading,或者骨架螢幕儘可能的減少白屏對使用者的影響體驗
|
|
合理使用第三方庫
|
對於一些第三方ui 框架，類庫，儘量使用按需載入，減少打包體積
|
|
提升程式碼使用率
|
利用程式碼分割，將指令碼中無需立即呼叫的程式碼在程式碼構建是轉變為非同步載入的過程
|
|
封裝
|
構建良好的專案架構，按照專案需求驚醒全域性元件，外掛，過濾器，指令，utils 等做一些公共封裝
|
|
圖片懶載入
|
使用圖片懶載入可以最佳化同一時間減少http 請求開銷
|
|
壓縮圖片
|
可以使用image-webpack-loader
|