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則可以