一.了解mvvm框架嗎？

vue.js ?react.js ?angular.js

(一定要想好說哪個，后面的話題都會圍繞該框架繼續延伸)

?

二.談談你對MVVM的認識？

1.先說mvc：所有通信都是單向的：提交一次反饋一次，通信一次相互制約。

• 視圖（View）：用戶界面。（傳送指令到 Controller）
• 控制器（Controller）：業務邏輯（完成業務邏輯后，要求 Model 改變狀態）
• 模型（Model）：數據保存（將新的數據發送到 View，用戶得到反）

MVC允許在不改變視圖的情況下改變視圖對用戶輸入的響應方式，用戶對View的操作交給了Controller處理，在Controller中響應View的事件調用Model的接口對數據進行操作，一旦Model發生變化便通知相關視圖進行更新。

2.MVVM定義

前后端分離：Model用純JavaScript對象表示，View負責顯示。

model：服務器的業務邏輯操作

view：用戶界面

ViewModel：核心樞紐

過程：把view和model關聯起來的就是View Model。

? ? ? ? ? ? ViewModel負責吧Model的數據同步到view顯出來，還負責吧view修改同步到Model。

1. 各部分之間的通信，都是雙向的。

2. View 與 Model 不發生聯系，都通過ViewModel傳遞。

?

三.雙向綁定是什么原理，能寫出來嗎？

大大減輕開發負擔，自動化處理。

雙向綁定：data和view之間的自動化處理

（ViewModel中的）data > view:正向Objest.defineProperty(ES5的js api)/reflect.defineProperty（ES6）。api能監聽到這個data的變化，監聽到變化后會有一個回調函數，回調函數里寫清data和view關系。

view > data:input時間

Objest.defineProperty了解更多:MDN的Object.defineProperty()解析

Objest.defineProperty和reflect.defineProperty區別：

• Objest.defineProperty：返回一個新的對象
• reflect.defineProperty：返回一個布爾值

Objest.defineProperty要手寫：

var obj = {test:"hello" } //對象已有的屬性添加特性描述 Object.defineProperty(obj,"test",{configurable:true | false,enumerable:true | false,value:任意類型的值,writable:true | false });// 在對象中添加一個屬性與存取描述符的示例 var bValue; Object.defineProperty(obj,"newKey",{get : function(){return bValue;},set : function(newValue){bValue = newValue;}, configurable:true,enumerable:true, }); obj.newKey = 38; // 對象o擁有了屬性b，值為38

• configurable 為 true 時，該屬性描述符才能夠被改變，同時該屬性也能從對應的對象上被刪除。默認為 false。
• enumerable為true時，該屬性才能夠出現在對象的枚舉屬性中。默認為 false。
• value屬性對應的值。可以是任何有效的 JavaScript 值（數值，對象，函數等）。默認為?undefined。
• writable為true時，value才能被賦值運算符改變。默認為 false。

• get: 一個給屬性提供 getter 的方法，如果沒有 getter 則為?undefined。當訪問該屬性時，該方法會被執行，方法執行時沒有參數傳入，但是會傳入this對象（由于繼承關系，這里的this并不一定是定義該屬性的對象）。默認為?undefined。

• set:一個給屬性提供 setter 的方法，如果沒有 setter 則為?undefined。當屬性值修改時，觸發執行該方法。該方法將接受唯一參數，即該屬性新的參數值。默認為?undefined。

?

四.使用了什么設計模式？

• 實現一個數據監聽器Observer，能夠對數據對象的所有屬性進行監聽，如有變動可拿到最新值并通知訂閱者（Dep）
• 實現一個指令解析器Compile，對每個元素節點的指令進行掃描和解析，根據指令模板替換數據，以及綁定相應的更新函數
• 實現一個Watcher，作為連接Observer和Compile的橋梁，能夠訂閱并收到每個屬性變動的通知，執行指令綁定的相應回調函數，從而更新視圖
• mvvm入口函數，整合以上三者

五.生命周期是什么？

以vue為例，貼一下官方的鏈接vue的生命周期

這個是我覺得比較好的vue生命周期解析：https://segmentfault.com/a/1190000011381906

六.有看源碼嗎？

vue的github地址：https://github.com/vuejs/vue
?

總結

以上是生活随笔為你收集整理的关于MVVM的面试问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。