vue用了一段時間了，一直沒有糾結過它的原理，今天看了一篇很不錯的文章：vue.js雙向繫結的實現原理，跟著敲了一遍，發現其中有意思的地方還是很多的，一些知識我之前都沒有接觸過，這裡要好好整理一下思路。
這篇部落格涉及的東西比較多，還需要慢慢整理。目前還未寫完。
主要的知識點：
1.vue雙向繫結原理（一）文件片段documentfragment
2.vue雙向繫結原理（二）訪問器屬性defineproperty()和發布/訂閱模式
大致思路： 首先vue會使用documentfragment劫持根元素裡包含的所有節點，這些節點不僅包括標籤元素，還包括文字，甚至換行的回車。
然後vue會把data中所有的資料，用defindproperty()變成vue的訪問器屬性，這樣每次修改這些資料的時候，就會觸發相應屬性的get，set方法。
接下來編譯處理劫持到的dom節點，遍歷所有節點，根據nodetype來判斷節點型別，根據節點本身的屬性（是否有v-model等屬性）或者文字節點的內容（是否符合}的格式）來判斷節點是否需要編譯。對v-model，繫結事件當輸入的時候，改變vue中的資料。對文字節點，將他作為乙個觀察者watcher放入觀察者列表，當vue資料改變的時候，會有乙個主題物件，對列表中的觀察者們發布改變的訊息，觀察者們再更新自己，改變節點中的顯示，從而達到雙向繫結的目的。
lang="en">
charset="utf-8">
雙向繫結demotitle>
body
style>
head>
type="text"
id="input"
v-model="text">
}div>
// vue建構函式
function
vue(options)
//遍歷傳入例項的data物件的屬性，將其設定為vue物件的訪問器屬性
function
observe
(obj,vm));
}//訪問器屬性是物件中的一種特殊屬性，它不能直接在物件中設定，而必須通過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)
return flag;
}//編譯節點，初始化資料繫結
function
compile
(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
() }
var vm = new vue(
})script>
body>
html>
vue雙向繫結原理及實現
資料雙向繫結原理簡單概括的話就是 view層影響model層是通過對 keyup 等事件的監聽。model層影響view層是通過object.defineproperty 方法劫持資料並結合發布訂閱者模式的方式來實現資料的雙向繫結。根據原理圖來介紹整個流程 1 首先使用object.definepr...
vue雙向繫結實現原理
當我們學會使用乙個東西的時候，就開始想要去知道這個東西是怎麼實現的，這個也是我們一直繼續 下去的動力，博主學了vue的時間也比較長了，自己也寫了乙個demo，還在不定時更新，有興趣的小夥伴可以去看看，如果這個專案能讓您有所收穫，那也是博主希望看到的，接下來也是聊聊自己開始學習vue一些實現原理的過程...
Vue雙向繫結原理及vue cli
vue.js介紹 1.vue.js的mvvm框架 2.什麼是vue.js vue.js是乙個輕量級的mvvm框架 中文官網 3.對比react angular vue.js更輕量級，gzip只有20k vue.js更容易上手，學習曲線平穩 吸取兩家之長，借鑑了angular的指令和react的指令化...