文章目錄

• vue原始碼分析總結
• MVVM框架基本實現原理
• 相關函式:
• 資料代理:
• 模板解析(編譯):
• 基本流程:
• 大括號表示式解析
• 事件指令解析:
• 一般指令解析:
• 資料繫結:
• observe(data, this)
• wacter(data)和Dep
• 雙向資料繫結:
• MVVM關係檢視

vue原始碼分析總結

MVVM框架基本實現原理

• 資料代理
• 模板解析
• 資料繫結

相關函式:

1. 將偽陣列轉為真陣列: [].slice.call(arr)
2. node.nodeType: 得到結點型別(document, element, attribute, text)
3. Object.defineProperty(obj, propertyName, props): 給物件新增屬性
4. Object.keys(obj): 得到物件自身可列舉屬性組成的陣列 (IE8不支援)
5. obj.hasOwnProperty(prop): 判斷prop是否是obj的自身屬性
6. DocumentFragment: 文件碎片(高效批量更新多個結點) 記憶體中儲存n
   個element的容器物件

資料代理:

1. 通過一個物件代理另一個物件來操作此物件的資料
2. Vue資料代理: 通過vm物件來代理data物件中所有屬性的操作(get/set)
3. 用到的是準備中的3和4特性

模板解析(編譯):

基本流程:

1. 將el的所有子結點取出, 新增到一個新建的文件fragment物件中
2. 對fragment中所有層次的子結點再記憶體中遞迴進行編譯解析處理
3. 將解析處理後的元素塞回頁面
4. 用到特性6和1

大括號表示式解析

1. 根據正則物件得到匹配出的表示式字串: 子匹配/RegExp.$1
2. 從data
   中取出表示式對應的屬性值
3. 將屬性值設定為文字結點的textContent

事件指令解析:

1. 從指令中取出事件名
2. 根據指令的值從methods中得到對應的事件處理函式物件
3. 給當前結點繫結指定事件名和回撥函式的dom事件監聽
4. 指令解析完後,移除指令屬性

一般指令解析:

1. 得到指令名和智力高表示式
2. 從data中根據表示式得到對應的值
3. 根據指令名確定需要操作元素結點的什麼屬性
4. 將得到的表示式的值設定到對應的屬性上
5. 移除元素的指令屬性

資料繫結:

1. 利用資料劫持來實現資料繫結的效果.
2. 通過defineProperty()來監視data中所有屬性(任意層次,遞迴實現)資料的變化,一旦變化Dep就發出通知更新介面
3. 用到3和4特性

observe(data, this)

1. 被觀察者必須是一個物件
2. 實現資料劫持
3. 遍歷所有資料,建立Dep
4. 給data重新定義屬性,新增set/get方法
5. 建立Dep和Wacter之間關係
6. 監聽新值變化,Dep發出訂閱通知,遍歷所有相關wacter進行更新
7. wacter呼叫回撥函式更新介面

wacter(data)和Dep

1. compile編譯解析表示式期間建立wacter監視,每一個表示式就對應一個監視器
2. Dep: 初始化時給data的屬性進行資料劫持時建立,與data中的屬性一一對應
3. Dep和wacter之間的關係是多對多

雙向資料繫結:

1. 雙向資料繫結是建立在單項資料繫結的基礎之上
2. 在解析v-model指令時,給當前元素新增input的監聽
3. 當input等value值發生變化時,將最新的值賦值給當前表示式所對應的data屬性,從而更新頁面

MVVM關係檢視