vue2/3响应式原理（简易版本）

vue2：

let obj = {
  a: 1,
  b: {
    c: 2,
  },
}

function _isObject(obj) {
  return typeof obj === 'object' && obj !== null
}

function observe(obj) {
  for (let k in obj) {
    let v = obj[k]
    if (!_isObject(v)) {
      Object.defineProperty(obj, k, {
        get() {
          console.log('读取', k)
          return v
        },
        set(val) {
          if (val !== v) console.log('改写', k)
          v = val
        },
      })
    } else {
      observe(v)
    }
  }
}

observe(obj)

obj.b.c = 3
console.log(obj.b.c)

vue3:

let obj = {
  a: 1,
  b: {
    c: 2,
  },
}

const proxy = new Proxy(obj, {
  get(target, key, receiver) {
    console.log('读取', key)
    return target[key]
  },

  set(target, key, newVal, receiver) {
    if (newVal !== target[key]) {
      console.log('改写', key)
      target[key] = newVal
    }
  },
})

proxy.a = 3
console.log(obj.a)