Vue 雙向繫結的原理

vue雙向繫結的原理

大致思路：首先vue會使用documentfragment劫持根元素裡包含的所有節點，這些節點不僅包括標籤元素，還包括文字，甚至換行的回車。

然後vue會把data中所有的資料，用defindproperty()變成vue的訪問器屬性，這樣每次修改這些資料的時候，就會觸發相應屬性的get，set方法。

接下來編譯處理劫持到的dom節點，遍歷所有節點，根據nodetype來判斷節點型別，根據節點本身的屬性（是否有v-model等屬性）或者文字節點的內容（是否符合}的格式）來判斷節點是否需要編譯。對v-model，繫結事件當輸入的時候，改變vue中的資料。對文字節點，將他作為乙個觀察者watcher放入觀察者列表，當vue資料改變的時候，會有乙個主題物件，對列表中的觀察者們發布改變的訊息，觀察者們再更新自己，改變節點中的顯示，從而達到雙向繫結的目的。

defineproperty()方法單獨定義。

//訪問器屬性的"值"比較特殊，讀取或設定訪問器屬性的值，實際上是呼叫其內部特性：get和set函式。

function

definereactive

(obj,key,val)return val; }, set:function

(newval) val = newval;

//給訂閱者列表中的watchers發出通知 dep.notify(); } }); }//主題物件dep建構函式

function

dep()//dep有兩個方法，增加觀察者和發布訊息 dep.prototype = , notify:function

()); } } //documentfragment（文件片段）可以看作節點容器，它可以包含多個子節點，當我們將它插入到dom中時，只有它的子節點會插入目標節點，所以把它看作一組節點的容器。使用documentfragment處理節點，速度和效能遠遠優於直接操作dom。vue進行編譯時，就是將掛載目標的所有子節點劫持（真的是劫持）到documentfragment中，經過一番處理後，再將documentfragment整體返回插入掛載目標。

function

nodetofragment

(node,vm)}

var reg =/\\}/;//節點型別為元素

if(node.nodetype ===1));//改變之後，通過屬性名取得資料 node.value = vm.data[name];//用完刪，所以瀏覽器中編譯之後的節點上沒有v-model屬性 node.removeattribute("v-model"); } } }//節點型別為text

if(node.nodetype ===3)}

if(reg.test(node.nodevalue))}

中的文字【任意內容】 var name = regexp.$1;//去掉前後空格，並將處理後的資料寫入節點 name = name.trim(); = vm.data[name];

//例項化乙個新的訂閱者watcher

new watcher(vm,node,name);return; } } }//觀察者建構函式。

//上邊例項化新的觀察者的時候執行這個函式：通過get()取得vue.data中對應的資料，然後通過update()方法把資料更新到節點中。

function

watcher

(vm,node,name) // 觀察者使用update方法，實際上是 watcher.prototype = ,//獲取data中的屬性值get: function

(){script>

body>

html>

Vue 雙向繫結的原理

vue雙向繫結原理

Vue雙向繫結原理

vue雙向繫結原理

Vue 雙向繫結的原理

vue雙向繫結原理

Vue雙向繫結原理

vue雙向繫結原理

相關推薦