Vue面試題

面試題

1. MVC和MVVM的區別

• MVC數據傳遞的方式是單向的
• MVVM數據傳遞的方式是雙向的
  MVC
  M 指的是Model(模型)是後端傳遞的數據，V指的是View(視圖)所看到的頁面，
  C指的是Controller是應用程序中處理用戶交互的部分
  MVC數據傳遞的方式

1. view傳遞指令引導Controller
2. Controller完成業務邏輯後，要求Model改變狀態
3. Model將新的數據發送到view，用戶獲得反饋

若是用原生的HTML+JS來比喻形容的話，能夠把用戶經過HTML(view)層操做。JS(controller)經過事件監聽，監聽到view的變化，而後經過Ajax(model)進行數據的交互(向服務端的接收和發送),隨即更新數據

MVVM
VM指的是鏈接view和model的橋樑，他有兩個方向，一個是將模型轉化爲視圖，即將後端傳遞的數據轉化爲所看到的頁面，實現的方式是數據綁定
二是將視圖轉化爲模型，即將所看到的頁面轉化爲後端的數據，實現的方式是DOM監聽

2. react和Vue的區別和共同點

• 相同點
  • 都是經過虛擬DOM實現快速渲染
  • 輕量級
  • 響應式組件
  • 服務端渲染
  • 易於集成路由工具，打包工具以及狀態管理工具
  • 優秀的支持和社區
• 區別
  • Vue 模板和渲染函數的彈性選擇，簡單的語法以及項目建立，更快的渲染速度和更小的體積
  • React 更適合大型應用和更好的可測試性 同時適用於webduan和原生APP，更大的生態圈帶來更多支持和工具

3. 你對Vue生命週期的理解

Vue實例有一個完整生命週期，也就是從開始建立，初始化數據，編譯模板，掛載Dom，渲染，更新，卸載等一系列過程，咱們稱這是Vue的生命週期

異步請求適合在哪一個生命週期調用?

官方實例的異步請求是在mounted生命週期中調用的，實際上也能夠在created生命週期中調用

4. computed和watch有什麼區別

computed：

• computed是計算屬性，也就是計算值，它更多用於計算值得場景
• computed具備緩存性，computed的值在getter執行過程後是會緩存的，只有在它依賴的屬性值改變以後，下一次獲取computed的值是纔會從新調用對應的getter來計算
• computed適用於計算比較消耗性能的就是那場景

watch：

• 更多的是觀察的做用，相似於某些數據的監聽回調，用於觀察props $emit或者本組件的值，當數據變化時來執行回調進行後續操做
• 無緩存性，頁面從新渲染時值不變化也會執行

5. Vue組件如何通訊

• props/emit+v-on: 經過props將數據自上而下傳遞，而經過$emit和v-on來向上傳遞信息。
• EventBus: 經過EventBus進行信息的發佈與訂閱，也叫觀察者模式，總線機制

6. Vue的雙向數據綁定原理

vue是採用數據劫持結合發佈者-訂閱者模式的方式，經過Object.defineProperty()來劫持各個屬性的setter,getter，在數據變更時發佈消息給訂閱者，觸發相應的監聽回調

• 當一個普通點JavaScript對象傳給Vue實例來做爲它的data選項時，Vue將遍歷它的屬性，用Object.defineProperty都加上setter和getter這樣的話，給這個對象的某個值複製，就會觸發setter，那麼就能監聽到數據變化
• complie解析模板指令，將模版中的變量替換成數據，而後初始化渲染頁面視圖，並將
• 每一個指令對應的節點綁定到更新函數，添加監聽數據的訂閱者，一旦數據有變更，收到通知更新視圖
• Watcher訂閱者是Observer和Complie以前的通訊橋樑，主要作的事情是：1，在自身實例化是網屬性訂閱器添加本身2，自身必須有一個update()方法3，待屬性變更dep.notice()通知時，調用自身的update()方法，並觸發compile中綁定的回調
• MVVM做爲數據綁定的入口，整合了Observer,Compilem,Watch三者，經過Observer來監聽本身的Model數據變化，經過Compile來解析編譯模板指令，最終利用Watcher搭起
  Observer和Complie之間的通訊橋樑，達到數據變化-》視圖更新；視圖交互變化->數據model變動的雙向綁定效果

7. Proxy相比defineProperty的優點

Object.defineProperty()的問題主要有是三個：

• 不能監聽數組的變化
• 必須遍歷對象的每一個屬性
• 必須深層遍歷嵌套對象

Proxy還擁有的優點proxy的第二個參數能夠有13中攔截方式，這比Object.defineProperty（）要更加豐富

8. Vue的路由實現：hash模式和history模式

前端路由：就是在保證只有一個HTML頁面，且與用戶交互時不刷新和跳轉頁面的同時，爲SPA中每一個視圖展現形式匹配一個特殊的url。在刷新，前進和後退時均經過這個特殊的url來實現

須要作到兩點

• 改變url且不讓瀏覽器像服務器發送請求
• 能夠監聽到url變化

hash模式

hash指的就是url後的#號以及後面的字符。hash值的變化不會致使瀏覽器向服務器發送和請求，並且hash的改變會觸發hashchange事件，瀏覽器的前進後退也能對其進行控制

history模式

在HTML5以前，瀏覽器已經有了history對象，可是早期的history只能用於多頁面的跳轉

history.go(-1);// 後退一頁
   history.forward();//前進一頁
   history.back();//後退一頁
   history.pushState(); //添加新的狀態到歷史狀態棧
   history.replaceState(); //用新的狀態代替當前狀態

hash,histroy如何抉擇

hash模式相比history模式的優勢：

1. 兼容性更好，能夠兼容到IE8
2. 無需服務端配合處理非單頁的Url地址

hash模式相比於history模式的缺點:

1. 看起來更醜
2. 會致使錨點功能失效
3. 相同hash值不會觸發動做將記錄到歷史棧中，而pushState則能夠