>[success]數據綁定 1. 數據綁定有三種方式 (1) 發布者-訂閱者模式(backbone.js) (2) 臟值檢查(Angular.js) (3) 數據劫持+觀察/訂閱模式 (Vue.js) >[warning]Observer的定義 **** 代碼如下: ~~~ <script> // 1. 注冊屬性攔截 function myObjectDefinePropery(data, key, val) { // 2. 如果val還是個對象, 就繼續遞歸遍歷它的所有key, 直到是基礎的數據類型 if (val && typeof val === 'object') { observe(val); return; } // 3. 攔截對象的key的set和get方法 Object.defineProperty(data, key, { get: function() { return val; }, set: function(newVal) { console.log(key+"被改變了"); val = newVal; } }); } // 4. 遍歷對象所有key, 給他們綁定set/get方法 function observe(data) { Object.keys(data).forEach(function(key) { myObjectDefinePropery(data, key, data[key]); }); } // 5. 定義model數據 let model = { obj: { userName: '' }, obj2: '' }; // 6. 綁定劫持set/get方法 observe(model); // 7. 觸發set方法 model.obj.userName = '李東旭'; model.obj2 = '你好啊'; // 8. 觸發get方法 console.log(model.obj2); </script> ~~~ **** [當前頁源代碼](https://github.com/lidongxuwork126com/ldx_vue/tree/master/%E4%BB%BFVue%E6%BA%90%E7%A0%81) 好了, 數據監聽可以實現了, 但是model改變時, 我們要怎么才能在DOM上進行更新呢, 看下一個文章