>[warning]訂閱者&觀察者定義 **** 1. 思路: (1): 新建訂閱者Dep, 在屬性劫持時, 往Dep中給每個屬性綁定一個Watcher對象 (2): 當屬性觸發set方法時, 調用Dep里所有的watcher執行  2. 代碼如下: ~~~ <script> function myObjectDefinePropery(data, key, val) { if (val && typeof val === 'object') { observe(val); return; } // 7. 實例化Dep類對象 let dep = new Dep(); Object.defineProperty(data, key, { get: function() { // 8. (Dep.target 指的是Watcher實例對象, 如果有, 則添加到訂閱類中) if (Dep.target){ // 9. 添加Watcher到訂閱類中 dep.addSub(Dep.target); } return val; }, set: function(newVal) { // 判斷set時值一樣則退出 if (val === newVal){ return; } val = newVal; // 10. 屬性發生變化, 通知訂閱者, 調用所有Wathcer執行對應方法 dep.notify(); } }); } function observe(data) { Object.keys(data).forEach(function(key) { myObjectDefinePropery(data, key, data[key]); }); } // 1. 新建訂閱類, 屬性改變, 觸發方法, 收集這些方法 function Dep () { // 用于放置每個屬性變化時應該執行的方法體 this.watcherArr = []; } Dep.prototype = { // 2. 用于添加屬性改變對應執行的方法 addSub: function(watcher){ this.watcherArr.push(watcher); }, // 3. 用于通知所有watcher, 讓watcher觀察者執行自己對應的方法體 notify: function(){ this.watcherArr.forEach(function(watcher){ // 4. 觀察者執行對應代碼, 可以跳轉到Watcher類的update方法查看 watcher.update(); }) } }; // 5. 定義觀察類, 用于監視某些屬性 function Watcher(model, exp) { // 用在Object.definePropery的get方法中, 用于保存當前觀察者對象 Dep.target = this; // 給這個model綁定數據劫持 observe(model); // 觸發Object.definePropery的get方法 model[exp]; } // 6. 屬性被修改了, 觸發update方法 Watcher.prototype = { update: function() { console.log("屬性更新了"); } }; // 11. 實例化觀察類, 讓它觀察這個對象 let model = { userName: "" }; new Watcher(model, "userName"); // 12. 修改屬性值, 看update方法里代碼是否執行 model.userName = "ok"; </script> ~~~ [當前頁源代碼](https://github.com/lidongxuwork126com/ldx_vue/tree/master/%E4%BB%BFVue%E6%BA%90%E7%A0%81) 那么如何模擬Vue類呢, 看下個文章