實現vue2.0響應式的基本思路

最近看了vue2.0源碼關於響應式的實現，以下博文將通過簡單的代碼還原vue2.0關於響應式的實現思路。

注意，這里只是實現思路的還原，對於里面各種細節的實現，比如說數組里面數據的操作的監聽，以及對象嵌套這些細節本實例都不會涉及到，如果想了解更加細節的實現，可以通過閱讀源碼 observer文件夾以及instance文件夾里面的state文件具體了解。

首先，我們先定義好實現vue對象的結構

class Vue {
    constructor(options) {
        this.$options = options;
        this._data = options.data;
        this.$el = document.querySelector(options.el);
    }
}

第一步：將data下面的屬性變為observable

使用Object.defineProperty對數據對象做屬性get和set的監聽，當有數據讀取和賦值操作時則調用節點的指令，這樣使用最通用的=等號賦值就可以觸發了。

//數據劫持，監控數據變化
function observer(value, cb){
  Object.keys(value).forEach((key) => defineReactive(value, key, value[key] , cb))
}

function defineReactive(obj, key, val, cb) {
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: ()=>{
      return val
    },
    set: newVal => {
      if(newVal === val)
        return
      val = newVal
    }
  })
}

第二步：實現一個消息訂閱器

很簡單，我們維護一個數組，這個數組，就放訂閱者，一旦觸發notify，訂閱者就調用自己

的update方法

class Dep {
  constructor() {
    this.subs = []
  }
  add(watcher) {
    this.subs.push(watcher)
  }
  notify() {
    this.subs.forEach((watcher) => watcher.cb())
  }
}

每次set函數，調用的時候，我們觸發notify，實現更新

那么問題來了。誰是訂閱者。對，是Watcher。。一旦 dep.notify()就遍歷訂閱者，也就是Watcher，並調用他的update()方法

function defineReactive(obj, key, val, cb) {
  const dep = new Dep()
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: ()=>{
      return val
    },
    set: newVal => {
      if(newVal === val)
        return
      val = newVal
      dep.notify()
    }
  })
}

第三步：實現一個 Watcher

Watcher的實現比較簡單，其實就是執行數據變化時我們要執行的操作

class Watcher {
  constructor(vm, cb) {
    this.cb = cb
    this.vm = vm
  }
  update(){
    this.run()
  }
  run(){
    this.cb.call(this.vm)
  } 
}

第四步：touch拿到依賴

上述三步，我們實現了數據改變可以觸發更新，現在問題是我們無法將watcher與我們的數據聯系到一起。

我們知道data上的屬性設置defineReactive后，修改data 上的值會觸發 set。那么我們取data上值是會觸發 get了。所以可以利用這一點，先執行以下render函數，就可以知道視圖的更新需要哪些數據的支持，並把它記錄為數據的訂閱者。

function defineReactive(obj, key, val, cb) {
  const dep = new Dep()
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: ()=>{
      if(Dep.target){
        dep.add(Dep.target)
      }
      return val
    },
    set: newVal => {
      if(newVal === val)
        return
      val = newVal
      dep.notify()
    }
  })
}

最后我們來看用一個代理實現將我們對data的數據訪問綁定在vue對象上

 _proxy(key) {
    const self = this
    Object.defineProperty(self, key, {
      configurable: true,
      enumerable: true,
      get: function proxyGetter () {
        return self._data[key]
      },
      set: function proxySetter (val) {
        self._data[key] = val
      }
    })
}

Object.keys(options.data).forEach(key => this._proxy(key))

下面就是整個實例的完整代碼

class Vue {
  constructor(options) {
    this.$options = options;
    this._data = options.data;
    this.$el =document.querySelector(options.el);
    Object.keys(options.data).forEach(key => this._proxy(key))
    observer(options.data)
    watch(this, this._render.bind(this), this._update.bind(this))
  }
  _proxy(key) {
    const self = this
    Object.defineProperty(self, key, {
      configurable: true,
      enumerable: true,
      get: function proxyGetter () {
        return self._data[key]
      },
      set: function proxySetter (val) {
        self._data[key] = val
      }
    })
  }
  _update() {
    console.log("我需要更新");
    this._render.call(this)
  }
  _render() {
    this._bindText();
  }

  _bindText() {
    let textDOMs=this.$el.querySelectorAll('[v-text]'),
    bindText;
    for(let i=0;i<textDOMs.length;i++){
       bindText=textDOMs[i].getAttribute('v-text');
       let data = this._data[bindText];
       if(data){
          textDOMs[i].innerHTML=data;
       }      
    }
  }
}

function observer(value, cb){
  Object.keys(value).forEach((key) => defineReactive(value, key, value[key] , cb))
}

function defineReactive(obj, key, val, cb) {
  const dep = new Dep()
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: ()=>{
      if(Dep.target){
        dep.add(Dep.target)
      }
      return val
    },
    set: newVal => {
      if(newVal === val)
        return
      val = newVal
      dep.notify()
    }
  })
}
function watch(vm, exp, cb){
  Dep.target = new Watcher(vm,cb);
  return exp()
}

 class Watcher {
  constructor(vm, cb) {
    this.cb = cb
    this.vm = vm
  }
  update(){
    this.run()
  }
  run(){
    this.cb.call(this.vm)
  } 
}

class Dep {
  constructor() {
    this.subs = []
  }
  add(watcher) {
    this.subs.push(watcher)
  }
  notify() {
    this.subs.forEach((watcher) => watcher.cb())
  }
}
Dep.target = null；

var demo = new Vue({
el: '#demo',
data: {
text: "hello world"
}
})

setTimeout(function(){
demo.text = "hello new world"

}, 1000)

  <body>
   <div id="demo">
       <div v-text="text"></div>
   </div>
  </body>

上面就是整個vue數據驅動部分的整個思路。如果想深入了解更細節的實現，建議深入去看vue這部分的代碼。