如何實(shí)現(xiàn) MVVM 類 Vue 迷你框架（二）

• MVue 基礎(chǔ)類
• 通過 Observe 類對(duì)數(shù)據(jù)進(jìn)行響應(yīng)式處理
• 數(shù)據(jù)被 get 的時(shí)候通過 Dep 收集對(duì)應(yīng)數(shù)據(jù)的依賴 watcher
• 數(shù)據(jù)被 set 的時(shí)候通過 Dep 通知對(duì)應(yīng)的數(shù)據(jù)的依賴 watcher 進(jìn)行數(shù)據(jù)更新操作
• 最后是數(shù)據(jù)編譯，將模板轉(zhuǎn)成 vdom 最后轉(zhuǎn)成 realdom

實(shí)現(xiàn) MVue 基礎(chǔ)類

• 第一步需要拿到外部傳遞進(jìn)來的 options, data

class MVue {
 constructor(options) {
     this.$options = options;
      this.$data = options.data();
   }
}

• 第二部代理這些數(shù)據(jù)到 MVue 實(shí)例上面

那么如何代理呢？需要拿到 MVue 實(shí)例的 data, 將屬性代理到 MVue 實(shí)例上 檢測(cè)數(shù)據(jù)變化重新更新到 MVue 實(shí)例上。

function proxy(vm) {
 Object.keys(vm.$data).forEach(key => {
    Object.defineProperty(vm, key, {
       get() {
          return vm.$data[key]    
         },
         set(val) {
          vm.$data[key] = val
         }
     })  
  })
}

然后再在 MVue 類加上以下代碼：

class MVue {
 constructor(options) {
    this.$options = options;
    this.$data = options.data();
    proxy(this)
 }
}

測(cè)試代碼

let vm = new MVue({
 data: function(){
     return {
        msg: "MVue"  
      } 
   }
})

console.log(vm)