简单实现Vue的observer和watcher

非庖丁瞎解牛系列～ ＝。＝

在平常项目开发的时候，咱们将js对象传给vue实例中的data选项，来做为其更新视图的基础，事实上是vue将会遍历它的属性，用Object.defineProperty 设置它们的 get/set，从而让 data 的属性可以响应数据变化：

Object.defineProperty(obj, name, {
   // 获取值的时候先置入vm的_data属性对象中
   get() {
     // 赋值的时候显示的特性
   },
   set() {
     // 值变化的时候能够作点什么
   }
 })

接下来能够利用其实现一个最简单的watcher.既然要绑定数据执行回调函数，data属性和callback属性是少不了的，咱们定义一个vm对象(vue中vm对象做为根实例，是全局的)：

/**
 * @param {Object} _data 用于存放data值
 * @param {Object} $data data原始数据对象，当前值
 * @param {Object} callback 回调函数
 */
var vm = { _data: {}, $data: {}, callback: {} }

在设置值的时候，若是检测到当前值与存储在_data中的对应值发生变化，则将值更新，并执行回调函数，利用Object.definedProperty方法中的get() & set() 咱们很快就能够实现这个功能～

vm.$watch = (obj, func) => {
    // 回调函数
    vm.callback[ obj ] = func
    // 设置data
    Object.defineProperty(vm.$data, obj, {
      // 获取值的时候先置入vm的_data属性对象中
      get() {
        return vm._data[ obj ]
      },
      set(val) {
        // 比较原值，不相等则赋值，执行回调
        if (val !== vm._data[ obj ]) {
          vm._data[ obj ] = val
          const cb = vm.callback[ obj ]
          cb.call(vm)
        }
      }
   })
}
vm.$watch('va', () => {console.log('已经成功被监听啦')})
vm.$data.va = 1

虽然初步实现了这个小功能，那么问题来了，obj对象若是只是一个简单的值为值类型的变量，那以上代码彻底能够知足；可是若是obj是一个具备一层甚至多层树结构对象变量，咱们就只能监听到最外层也就是obj自己的变化，内部属性变化没法被监听（没有设置给对应属性设置set和get),由于对象自身内部属性层数未知，理论上能够无限层（通常不会这么作），因此此处仍是用递归解决吧～

我们先将Object.defineProperty函数剥离，一是解耦，二是方便咱们递归～

var defineReactive = (obj, key) => {
  Object.defineProperty(obj, key, {
    get() {
      return vm._data[key]
    },
    set(newVal) {
      if (vm._data[key] === newVal) {
        return
      }
      vm._data[key] = newVal
      const cb = vm.callback[ obj ]
      cb.call(vm)
    }
  })
}

咦，说好的递归呢，不着急，上面只是抽离了加get和set功能的函数，
如今咱们加入递归～

var Observer = (obj) => {
  // 遍历，让对象中的每一个属性能够加上get set
  Object.keys(obj).forEach((key) =>{
    defineReactive(obj, key)
  })
}

这里仅仅只是遍历，要达到递归，则须要在defineReactive的时候再加上判断，判断这个属性是否为object类型，若是是，则执行Observer自身～咱们改写下defineReactive函数

// 判断是否为object类型，是就继续执行自身
var observe = (value) => {
  // 判断是否为object类型，是就继续执行Observer
  if (!value || typeof value !== 'object') {
    return
  }
  return new Observer(value)
}

// 将observe方法置入defineReactive中Object.defineProperty的set中，造成递归
var defineReactive = (obj, key) => {
  // 判断val是否为对象，若是对象有不少层属性，则这边的代码会不断调用自身（由于observe又执行了Observer,而Observer执行defineReactive），一直到最后一层，从最后一层开始执行下列代码，层层返回（能够理解为洋葱模型），直到最前面一层，给全部属性加上get／set
  var childObj = observe(vm._data[key])
  Object.defineProperty(obj, key, {
    get() {
      return vm._data[key]
    },
    set(newVal) {
      // 若是设置的值彻底相等则什么也不作
      if (vm._data[key] === newVal) {
         return
      }
      // 不相等则赋值
      vm._data[key] = newVal
      // 执行回调
      const cb = vm.callback[ key ]
      cb.call(vm)
      // 若是set进来的值为复杂类型，再递归它，加上set/get
      childObj = observe(val)
    }
  })
}

如今咱们来整理下，把咱们刚开始实现的功能雏形进行进化

var vm = { _data: {}, $data: {}, callback: {}}
var defineReactive = (obj, key) => {
  // 一开始的时候是不设值的，因此，要在外面作一套observe
  // 判断val是否为对象，若是对象有不少层属性，则这边的代码会不断调用自身（由于observe又执行了Observer,而Observer执行defineReactive），一直到最后一层，从最后一层开始执行下列代码，层层返回（能够理解为洋葱模型），直到最前面一层，给全部属性加上get／set
  var childObj = observe(vm._data[key])
  Object.defineProperty(obj, key, {
    get() {
      return vm._data[key]
    },
    set(newVal) {
      if (vm._data[key] === newVal) {
        return
      }
    // 若是值有变化的话，作一些操做
    vm._data[key] = newVal
    // 执行回调
    const cb = vm.callback[ key ]
    cb.call(vm)
    // 若是set进来的值为复杂类型，再递归它，加上set/get
    childObj = observe(newVal)
    }
  })
}
var Observer = (obj) => {
  Object.keys(obj).forEach((key) =>{
    defineReactive(obj, key)
  })
}
var observe = (value) => {
  // 判断是否为object类型，是就继续执行Observer
  if (!value || typeof value !== 'object') {
    return
  }
  Observer(value)
}
vm.$watch = (name, func) => {
  // 回调函数
  vm.callback[name] = func
  // 设置data
  defineReactive(vm.$data, name)
}
// 绑定a，a若变化则执行回调方法
var va = {a:{c: 'c'}, b:{c: 'c'}}
vm._data[va] = {a:{c: 'c'}, b:{c: 'c'}}
vm.$watch('va', () => {console.log('已经成功被监听啦')})
vm.$data.va = 1

在谷歌浏览器的console中粘贴以上代码，而后回车发现，结果不出所料，va自己被监听了，能够，咱们试试va的内部属性有没有被监听，改下vm.$data.va = 1为vm.$data.va.a = 1,结果发现报错了

什么鬼？

咱们又仔细检查了代码，WTF，原来咱们在递归的时候，Object.defineProperty中的回调函数cb的key参数一直在发生变化，咱们但愿的是里面的属性变化的时候执行的是咱们事先定义好的回调函数～那么咱们来改下方法，将一开始定义好的回调做为参数传进去，确保每一层递归set的回调都是咱们事先设置好的～

var vm = { _data: {}, $data: {}, callback: {}}
var defineReactive = (obj, key, cb) => {
  // 一开始的时候是不设值的，因此，要在外面作一套observe
  var childObj = observe(vm._data[key], cb)
  Object.defineProperty(obj, key, {
    get() {
      return vm._data[key]
    },
    set(newVal) {
      if (vm._data[key] === newVal) {
        return
      }
      // 若是值有变化的话，作一些操做
      vm._data[key] = newVal
      // 执行回调
      cb()
      // 若是set进来的值为复杂类型，再递归它，加上set/get
      childObj = observe(newVal)
    }
  })
}
var Observer = (obj, cb) => {
  Object.keys(obj).forEach((key) =>{
    defineReactive(obj, key, cb)
  })
}
var observe = (value, cb) => {
  // 判断是否为object类型，是就继续执行Observer
  if (!value || typeof value !== 'object') {
    return
  }
  Observer(value, cb)
}
vm.$watch = (name, func) => {
  // 回调函数
  vm.callback[name] = func
  // 设置data
  defineReactive(vm.$data, name, func)
}
// 绑定a，a若变化则执行回调方法
var va = {a:{c: 'c'}, b:{c: 'c'}}
vm._data.va = {a:{c: 'c'}, b:{c: 'c'}}
vm.$watch('va', () => {console.log('又成功被监听啦')})
vm.$data.va.a = 1

再执行一次以上代码，发现内部的a属性也被监听到了，并且属性值变化的时候执行了咱们事先定义好的回调函数～嘻嘻嘻～

虽然实现了$watch的基本功能，可是和vue的源码仍是有必定的距离，特别是一些扁平化和模块化的思想须要涉及到一些设计模式，其实咱们在看源码的时候，经常是逆着做者的思惟走的，功能从简单到复杂每每涉及到代码的模块化和解耦，使得代码很是地分散，读起来晦涩难懂，本身动手，从小功能代码块实现，而后结合源码，对比思路，慢慢丰富，也不失为一种学习源码的方式～

ps: 若是各位读者看到本文的error或者由更好的优化建议，随时联系～