實現乙個mvvm

最近在團隊內做了一次vue原理分享，現場手寫了乙個乞丐版mvvm，這裡記錄一下這個mvvm實現的過程。

原始碼：這個mvvm是基於發布訂閱模式實現（也是vue本身的實現原理），最終達到的效果如下：

使用方式也跟vue一樣：

重置

class mvvm  = options;

this.methods = methods;
this.target = null;
// 初始化dispatcher
this.observe(this, data);
// 初始化watcher
this.compile(document.getelementbyid(el));
}observe(root, data) 
}definereactive(root, key, value) 
const dep = new dispatcher();
object.defineproperty(root, key, ,
get() 
});}
compile(dom) );
this.target = new watcher(node, 'input');
this[name];
}if (attr.name == '@click') }}
// text節點
if (node.nodetype == 3) \}/;
const match = node.nodevalue.match(reg);
if (match) }}
}}class dispatcher 
add(watcher) 
notify(value) 
}class watcher 
update(value) 
if (this.type == 'text') }}

最根本的原理很簡單，無非是基於發布訂閱的訊息通知模式，訊息發出方來自mvvm中modal層的變法，而訂閱方來自view層。

modal層的變化，是通過對data設定setter來實現響應式，只要資料發生變化，通知所有訂閱者。

view層的訂閱，則是在compile階段，compile會對所有資料依賴進行收集，然後在getter中註冊監聽。

自己動手實現乙個MVVM庫

我們知道的，常見的資料繫結的實現方法 1 資料劫持 vue 通過object.defineproperty 去劫持資料每個屬性對應的getter和setter 2 髒值檢測 angular 通過特定事件比如input，change，xhr請求等進行髒值檢測。3 發布 訂閱模式 backbone 通過...

mvvm實現乙個簡單的vue

vue，基於mvvm模式下的乙個前端框架 mvvm模式下簡單的實現資料 資料劫持 1.是用object.defineproperty 實現資料 2.使用發布訂閱者模式，配合 object.defineproperty，實現資料劫持 資料劫持包括依賴收集和依賴促發 只考慮最簡單的方式，並且沒有包括具體...

利用 Proxy API 實現乙個簡易 MVVM

vue 3 使用了 proxy api，有些手癢，就弄乙個簡單的結構玩玩吧。proxy api 見 mdn proxy 依賴收集 mvvm 初始化時劫持資料，並設定觀察者 dep。模仿 vue 結構是在 get 時往觀察者 dep 推入被觀察者 watcher，然後 set 時讓觀察者通知所有被觀察...