前端面試之MVVM淺析

摘要： 1.2 vue 實現 todo-list 1.3 jQuery 和框架的區別 資料和檢視的分離，解耦（開放封閉原則） 以資料驅動檢視，只關心資料變化，DOM 操作被封裝 二、說一下對 MVVM 的理解 2.1 MVC ...

1.2 vue 實現 todo-list

1.3 jQuery 和框架的區別

• 資料和檢視的分離，解耦（開放封閉原則）
• 以資料驅動檢視，只關心資料變化，DOM 操作被封裝

二、說一下對 MVVM 的理解

2.1 MVC

M - Model
V - View
C - Controller

2.2 MVVM

• Model - 模型、資料
• View - 檢視、模板（檢視和模型是分離的）
• ViewModel - 連線 Model 和 View

2.3 關於 ViewModel

MVVM
ViewModel

2.4 MVVM 框架的三大要素

• 響應式： vue 如何監聽到 data 的每個屬性變化？
• 模板引擎： vue 的模板如何被解析，指令如何處理？
• 渲染： vue 的模板如何被渲染成 html ？以及渲染過程

三、vue 中如何實現響應式

3.1 什麼是響應式

• 修改 data 屬性之後，vue 立刻監聽到
• data 屬性被代理到 vm 上

3.2 Object.defineProperty

3.3 模擬實現

四、vue 中如何解析模板

4.1 模板是什麼

• 本質：字串
• 有邏輯，如 v-if v-for 等
• 與 html 格式很像，但有很大區別
• 最終還要轉換為 html 來顯示

模板最終必須轉換成 JS 程式碼，因為

• 有邏輯（ v-if v-for ），必須用 JS 才能實現
• 轉換為 html 渲染頁面，必須用 JS 才能實現
• 因此，模板最重要轉換成一個 JS 函式（ render 函式）

4.2 render 函式

• 模板中所有信息都包含在了 render 函式中
• this 即 vm
• price 即 this.price 即 vm.price ，即 data 中的 price
• _c 即 this._c 即 vm._c

4.3 render 函式與 vdom

• vm._c 其實就相當於 snabbdom 中的 h 函式
• render 函式執行之後，返回的是 vnode

• updateComponent 中實現了 vdom 的 patch
• 頁面首次渲染執行 updateComponent
• data 中每次修改屬性，執行 updateComponent

五、vue 的整個實現流程

• 第一步：解析模板成 render 函式
• 第二步：響應式開始監聽
• 第三步：首次渲染，顯示頁面，且繫結依賴
• 第四步： data 屬性變化，觸發 rerender

5.1 第一步：解析模板成 render 函式

• 模板中的所有資訊都被 render 函式包含
• 模板中用到的 data 中的屬性，都變成了 JS 變數
• 模板中的 v-model v-for v-on 都變成了 JS 邏輯
• render 函式返回 vnode

5.2 第二步：響應式開始監聽

• Object.defineProperty
• 將 data 的屬性代理到 vm 上

5.3 第三步：首次渲染，顯示頁面，且繫結依賴

• 初次渲染，執行 updateComponent ，執行 vm._render()
• 執行 render 函式，會訪問到 vm.list vm.title
• 會被響應式的 get 方法監聽到
• 執行 updateComponent ，會走到 vdom 的 patch 方法
• patch 將 vnode 渲染成 DOM ，初次渲染完成

為何要監聽 get ，直接監聽 set 不行嗎？

• data 中有很多屬性，有些被用到，有些可能不被用到
• 被用到的會走到 get ，不被用到的不會走到 get
• 未走到 get 中的屬性， set 的時候我們也無需關心
• 避免不必要的重複渲染