前端面試之MVVM淺析
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
的時候我們也無需關心 - 避免不必要的重複渲染