代码演示

/* 模拟更新视图 */
function updateView() {
    console.log('视图更新')
}

/* 监听对象属性 */
function observer(target) {
    // 只监听对象和数组
  if (typeof target !== 'object' || target == null) {
      return target
  }
  // 重新定义各个属性
  for (let key in target) {
      defineReactive(target, key, target[key])
  }
}

/* 对属性重新定义，并且监听 */
function defineReactive(target, key, val) {
  // 深度监听
  observer(val) // 因为val不一定是值，也可能是一个对象或数组
    Object.defineProperty(target, key, {
      get() {
        return val
    },
    set(newVal) {
        if (newVal !== val) {
        // 深度监听 新增加的如果是对象和数组也要加入监听
        observer(newVal)
        // 设置新值
          val = newVal
      }
      // 更新视图
      updateView()
    }
  })
}

/* 测试 */
// 准备数据
const data = {
  name: 'zhangsan',
  age: 20,
  info: {
    address: '北京' // 需要深度监听
  }
}
data.name = 'lisi' // 会输出一次 视图更新
data.age = { num: 21 } // 会输出一次 视图更新，且num也被监听了
data.age.num = 22 // 会输出一次 视图更新
data.sex = 'male' // 啥也不会输出，因为没有对这样新增的属性进行监听
delete data.name // 同样什么也不会输出，因为核心API就没有这个功能

Object.defineProperty缺点

• 深度监听，需要递归到底，一次性计算量大
• 无法监听新增属性/删除属性（Vue.set Vue.delete）
• 无法原生监听数组，需要特殊处理

以上完成了对对象的监听，对数组的一些操作push，pop等则无效，因为核心API不具备对数组的监听