vue原始碼探究（第六彈）
摘要：
vue原始碼探究(第六彈)
繼續之前的，差不多到最後一part了，資料的雙向繫結。
雙向資料繫結
雙向資料繫結是建立在單向資料繫結(model ==> view)的基礎之上的
雙向資料繫結的實現流程
在解析v-model指令中，給當前元素新...
vue原始碼探究(第六彈)
繼續之前的，差不多到最後一part了，資料的雙向繫結。
雙向資料繫結
- 雙向資料繫結是建立在單向資料繫結(model ==> view)的基礎之上的
- 雙向資料繫結的實現流程
- 在解析v-model指令中，給當前元素新增input監聽
- 當input的value發生變化時，將最新的值賦值給當前表示式所對應的data屬性
舉個例子:chestnut:
<div id="test">
<input type="text" v-model="msg">
<p>{{msg}}</p>
</div>
<script type="text/javascript">
new MVVM({
el: '#test',
data: {
msg: 'haha'
}
})
// 通過v-model 我們可以實現資料的雙向繫結 下面來簡述一下流程
// 1. 進入 new MVVM()
// 2. observe 對資料進行監視
// 3. new Observer(value)
// 4. 對指定屬性實現響應式的資料繫結 defineReactive
// 5. new Dep -> defineProperty 新增get和set fn
// 6. 進入compile編譯
// 7. step1 -> node2Fragment 文件碎片 將node進行批量處理
// 8. step2 -> init() -> compileElement() -> 元素ele node -> compile() -> attrName = v-module
// 9. bind() -> 先getVal() -> modelUpdater 更新資料
// 10. new watcher() 用於監聽屬性值的變化 自動呼叫 更新對應的節點
</script>
最後附上一張圖
image.png
End
vue的原始碼探究暫時就到這裡了，bye:mortar_board: