vue2基本响应式实现

let data = {
  name: 'dean',
  age: 30,
  level1: {
    level2: {
      level3_1: {
        level4: {
          value: 'anna'
        }
      },
      level3_2: {
        level4: {
          value: 'jing'
        }
      }
    }
  }
}

observe(data)

function observe(target) {
  // 如果不是对象或者数组就直接return 这也是地柜结束的条件
  if (typeof target !== 'object' || target === null) return
  // 遍历对象每个属性 对每个属性添加响应式
  for(let k in target) {
    defineReactive(target, k, target[k])
  }
}

function defineReactive(target, key, value) {
  // value子属性的值 对其observe一下 递归
  observe(value)
  // 再让这个子属性添加响应式
  Object.defineProperty(target, key, {
    get() {
      return value
    },
    set(newValue) {
      if (newValue === value) return
      // 设置新值也要observe一下
      observe(newValue)
      value = newValue
      console.log('更新视图')
    }
  })
}

console.log(data.level1.level2.level3_1.level4.value)
data.level1.level2.level3_1.level4.value = 'jing'
console.log(data.level1.level2.level3_1.level4.value)