mvvm實現乙個簡單的vue

vue，基於mvvm模式下的乙個前端框架

mvvm模式下簡單的實現資料**，資料劫持

1.是用object.defineproperty 實現資料**

2.使用發布訂閱者模式，配合 object.defineproperty，實現資料劫持

資料劫持包括依賴收集和依賴促發

（只考慮最簡單的方式，並且沒有包括具體的依賴收集，我模擬的依賴收集，依賴收集得是在模板解析的時候，需要使用正則匹配出vue的一般指令和表示式）

/* 實現乙個簡易的vue */

class myvue 
/* 實現vue對_data資料的** */
proxydata(_self) ,
set (val) 
})})
}/* 對_data資料劫持 */
datahijacking(_self) ,
set (val) 
})})
}}var uid = 0;
class dep 
/* 依賴新增 */
addsubs (id,fn) 
this.handlers[id].push(fn)
}/* 依賴促發 */
notify (val) )}}
}/* 具體訂閱者 */
class watch 
update (val) 
}let vm = new myvue(})
console.log(vm)
vm.name = 'czklovel11'

實現乙個mvvm

最近在團隊內做了一次vue原理分享，現場手寫了乙個乞丐版mvvm，這裡記錄一下這個mvvm實現的過程。原始碼 這個mvvm是基於發布訂閱模式實現 也是vue本身的實現原理 最終達到的效果如下 使用方式也跟vue一樣 重置 實現很簡單 class mvvm options this.methods m...

手動實現乙個vue的mvvm，思路解析

1 解析dom fragment編譯，初始化new watcher 2 資料劫持，object.defineproperty obj,key,新增wacher，新增訂閱者 set function newvalue noticfy 執行，更新資料 3,發布訂閱模式 什麼是發布訂閱者模式呢？舉個例子 ...

實現乙個簡單的Vue外掛程式

外掛程式通常會為 vue 新增全域性功能。外掛程式的範圍沒有限制 一般有下面幾種 1.新增全域性方法或者屬性，如 vue custom element 2.新增全域性資源 指令 過濾器 過渡等，如 vue touch 3.通過全域性 mixin 方法新增一些元件選項，如 vue router 4.新...