Vue.js最核心的功能有兩個，一是響應式的數據綁定系統，二是組件系統。
一、訪問器屬性：Object.defineProperty
ECMAScript 262v5帶來的新東西，FF把它歸入為javaScript 1.8.5的功能之一。
語法：Object.defineProperty(obj, prop, descriptor)
參數：obj:目標對象；prop:需要定義的屬性或方法的名字；descriptor:目標屬性所擁有的特性。
可供定義的特性列表：
- value:屬性的值
- writable:如果為false，屬性的值就不能被重寫。
- get: 一旦目標屬性被訪問就會調回此方法，並將此方法的運算結果返回用戶。
- set:一旦目標屬性被賦值，就會調回此方法。
- configurable:如果為false，則任何嘗試刪除目標屬性或修改屬性以下特性（writable, configurable, enumerable）的行為將被無效化。
- enumerable:是否能在for...in循環中遍歷出來或在Object.keys中列舉出來。
說明：Object.defineProperty() 方法設置屬性時，屬性不能同時聲明訪問器屬性（ set 和 get ）和 writable 或者 value 屬性。 意思就是，某個屬性設置了 writable 或者 value 屬性，那么這個屬性就不能聲明 get 和 set 了，反之亦然。
因為 Object.defineProperty() 在聲明一個屬性時，不允許同一個屬性出現兩種以上存取訪問控制。
二、極簡綁定實現
<input type="text" id="a”> <span id="b"></span> <script> var obj = {}; Object.defineProperty(obj,'hello',{ set: function(newVal){ document.getElementById('a').val = newVal; document.getElementById('b').innerHTML = newVal; }, get: function(){ return document.getElementById('b').innerHTML; } }); document.addEventListener('keyup',function(e){ obj.hello = e.target.value; }); </script>
三、 DocumentFragment
DocumentFragment 接口表示文檔的一部分（或一段）。更確切地說，它表示一個或多個鄰接的 Document 節點和它們的所有子孫節點。DocumentFragment 節點不屬於文檔樹，繼承的 parentNode 屬性總是 null。
不過它有一種特殊的行為，該行為使得它非常有用，即當請求把一個 DocumentFragment 節點插入文檔樹時，插入的不是 DocumentFragment 自身，而是它的所有子孫節點。這使得 DocumentFragment 成了有用的占位符，暫時存放那些一次插入文檔的節點。它還有利於實現文檔的剪切、復制和粘貼操作。可以用 Document.createDocumentFragment() 方法創建新的空 DocumentFragment 節點。
DocumentFragment。程序員可以使用DocumentFragment將一批子元素添加到任何類似node的父節點上，對這批子元素的操作不需要一個真正的根節點。可以不依賴可見的DOM來構造一個DOM結構，它比直接操作DOM快70%。
<ul id="list"></ul> // Create the fragment var frag = document.createDocumentFragment(); // Create numerous list items, add to fragment for(var x = 0; x < 10; x++) { var li = document.createElement("li"); li.innerHTML = "List item " + x; frag.appendChild(li); } // Mass-add the fragment nodes to the list listNode.appendChild(frag);
當需要進行大量DOM操作時，盡量使用DocumentFragement，它會讓你的應用變的更快！ Vue進行編譯時，就是將掛載目標的所有子節點劫持（真的是劫持）到DocumentFragment中，經過一番處理后，再將DocumentFragment整體返回插入掛載目標。
function nodeToFragment (node, vm) { var flag = document.createDocumentFragment(); var child; while (child = node.firstChild) { compile(child, vm); flag.append(child); // 將子節點劫持到文檔片段中 } return flag; }
四、Vue實現
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Two-way data-binding</title> </head> <body> <div id="app"> <input type="text" v-model="text"> {{ text }} </div> <script> function observe (obj, vm) { Object.keys(obj).forEach(function (key) { defineReactive(vm, key, obj[key]); }); } function defineReactive (obj, key, val) { var dep = new Dep(); Object.defineProperty(obj, key, { get: function () { // 添加訂閱者watcher到主題對象Dep if (Dep.target) dep.addSub(Dep.target); return val }, set: function (newVal) { if (newVal === val) return val = newVal; // 作為發布者發出通知 dep.notify(); } }); } function nodeToFragment (node, vm) { var flag = document.createDocumentFragment(); var child; while (child = node.firstChild) { compile(child, vm); flag.append(child); // 將子節點劫持到文檔片段中 } return flag; } function compile (node, vm) { var reg = /\{\{(.*)\}\}/; // 節點類型為元素 if (node.nodeType === 1) { var attr = node.attributes; // 解析屬性 for (var i = 0; i < attr.length; i++) { if (attr[i].nodeName == 'v-model') { var name = attr[i].nodeValue; // 獲取v-model綁定的屬性名 node.addEventListener('input', function (e) { // 給相應的data屬性賦值，進而觸發該屬性的set方法 vm[name] = e.target.value; }); node.value = vm[name]; // 將data的值賦給該node node.removeAttribute('v-model'); } }; } // 節點類型為text if (node.nodeType === 3) { if (reg.test(node.nodeValue)) { var name = RegExp.$1; // 獲取匹配到的字符串 name = name.trim(); // node.nodeValue = vm[name]; // 將data的值賦給該node new Watcher(vm, node, name); } } } function Watcher (vm, node, name) { Dep.target = this; this.name = name; this.node = node; this.vm = vm; this.update(); Dep.target = null; } Watcher.prototype = { update: function () { this.get(); this.node.nodeValue = this.value; }, // 獲取data中的屬性值 get: function () { this.value = this.vm[this.name]; // 觸發相應屬性的get } } function Dep () { this.subs = [] } Dep.prototype = { addSub: function(sub) { this.subs.push(sub); }, notify: function() { this.subs.forEach(function(sub) { sub.update(); }); } }; function Vue (options) { this.data = options.data; var data = this.data; observe(data, this); var id = options.el; var dom = nodeToFragment(document.getElementById(id), this); // 編譯完成后，將dom返回到app中 document.getElementById(id).appendChild(dom); } var vm = new Vue({ el: 'app', data: { text: 'hello world' } }); </script> </body> </html>
五、其他綁定方式
1.Angularjs內部會維護一個序列，將所有需要監控的屬性放在這個序列中，當發生某些特定事件時（注意，這里並不是定時的而是由某些特殊事件觸發的），Angularjs會調用 $digest 方法，這個方法內部做的邏輯就是遍歷所有的watcher，對被監控的屬性做對比，對比其在方法調用前后屬性值有沒有發生變化，如果發生變化，則調用對應的handler。http://www.html-js.com/article/2145
這種方式的缺點很明顯，遍歷輪訓watcher是非常消耗性能的，特別是當單頁的監控數量達到一個數量級的時候。
2.使用ECMAScript7中的 Object.observe 方法對對象（或者其屬性）進行監控觀察，一旦其發生變化時，將會執行相應的handler。（目前已被發起人撤回）
3.封裝屬性訪問器
在php中的 __get() 和 __set() 方法。在javascript中也有類似的概念，不過不叫魔術方法，而是叫做訪問器
var data = { name: "erik", getName: function() { return this.name; }, setName: function(name) { this.name = name; } };
從上面的代碼中我們可以管中窺豹，比如 data 中的 getName() 和 setName() 方法，我們可以簡單的將其看成 data.name 的訪問器（或者叫做 存取器 ）。
其實，針對上述的代碼，更加嚴格一點的話，不允許直接訪問 data.name 屬性，所有對 data.name 的讀寫都必須通過 data.getName() 和 data.setName() 方法。所以，想象一下，一旦某個屬性不允許對其進行直接讀寫，而必須是通過訪問器進行讀寫時，那么我當然通過重寫屬性的訪問器方法來做一些額外的情，比如屬性值變更監控。使用屬性訪問器來做數據雙向綁定的原理就是在此。
這種方法當然也有弊端，最突出的就是每添加一個屬性監控，都必須為這個屬性添加對應訪問器方法，否則這個屬性的變更就無法捕獲。
Object.defineProperty 方法
vue.js和avalon.js實現數據雙向綁定的原理就是屬性訪問器。不過它當然不會像上述示例代碼一樣原始。它使用了ECMAScript5.1（ECMA-262）中定義的標准屬性 Object.defineProperty 方法。針對國內行情，部分還不支持Object.defineProperty 低級瀏覽器采用VBScript作了完美兼容，不像其他的mvvm框架已經逐漸放棄對低端瀏覽器的支持。