简单实现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函数