数据响应原理（二）defineReactive函数和递归侦测对象全部属性

Observer类

将一个正常的object转换为每个层级 的属性都是响应式（可以被侦测的）的object

逻辑图

方法实现

// 入口
// index.js
import observe from './observe'
const obj = {
  a: {
    b: {
      m:5
    },
    c: 5
  },
  n: 4
}
observe(obj)
obj.a.c = 10

// 函数defineReactive
import observe from './observe'
export default function defineReactive(obj, key, val) {
  if (arguments.length == 2) {
    val = obj[key]
  }
  // 子元素observe,形成多文件互相调用成为递归
  let childOb = observe(val)
  console.log('-------------defineReactive', obj, key)
  Object.defineProperty(obj, key, {
      configurable: true,
      enumerable: true,
      // getter
      get() {
        console.log('-----------------访问属性', key, ':', val)
        return val
      },
      // setter
      set(newData) {
        if (val === newData) {
          return false
        }
        console.log('-----------------设置属性', key, ':', val)
        val = newData
        // 当设置了新值，这个值页要被observe，防止新值又是个对象
        childOb = observe(newData)
      } 
  });
}
// Observer 方法
import Observer from './observer'
export default function observe(value) {
  // 如果不是对象 返回
  if (typeof value != 'object') return
  // 定义ob
  let ob;
  if ('__ob__' in value) {
    ob = value.__ob__;
  } else {
    ob = new Observer(value)
  }
  return ob
}


// utils
export function def(obj, key, value, enumerable) {
  Object.defineProperty(obj, key, {
    configurable: true,
    enumerable,
    writable: true,
    value
});
}