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

接下來我們需要在上節(jié)課的基礎(chǔ)上，對數(shù)據(jù)進(jìn)行響應(yīng)式處理，大致的框架代碼如下：

class MVue {
 constructor(options) {
     this.$options = optinos;
      this.$data = options.data();
      
      // 數(shù)據(jù)代理
      proxy(this)
      
      // 對 data 數(shù)據(jù)進(jìn)行響應(yīng)式處理
      observe(this.$data)
   }
}

• 定義一個(gè)方法

function defineReactive(obj, key, val) {
 let curVal = val; // 緩存上一次的值
   Object.defineProperty(obj, key, {
     get() {
          // 需要進(jìn)行依賴收集
        return curVal;  
      },
      set(newVal) {
        if(newVal !== curVal) {
          curVal = newVal;
           // 當(dāng)值發(fā)生變化的時(shí)候，需要做通知數(shù)據(jù)更新操作
         }
      }
   })
}

那么如何來實(shí)現(xiàn)我們 Observer 類呢，他到底處理什么呢？

• 遍歷 data 數(shù)據(jù)，給數(shù)據(jù)屬性挨個(gè)設(shè)置 setter, getter 屬性
• 需要分別處理 數(shù)組和對象

class Observer {
 constructor(val) {
     this.$value = val;
      if(Array.isArray(val)) {
        // 處理數(shù)組
      } else {
        // 處理對象
         // 需要寫一個(gè)方法遍歷
         this.walk(val)
      }
   }
   // 遍歷對象，響應(yīng)式對象
   walk(obj) {
     Object.keys(key => defineReactive(obj, key, obj[key]))
   }
}