vue3如何实现响应式

使用Proxy和Reflect实现响应式

优点：

• 深度监听，性能高。只有在访问时候才会递归深度监听
• 可监听属性新增和删除
• 可监听数组

缺点：

• 无法兼容所有浏览器

function reactive (target = {}) {
  if (typeof target !== 'object' || target === null) {
    return target
  }
  const proxyConf = {
    get (target, key, receiver) {
      const result = Reflect.get(target, key, receiver)
      return reactive(result)
    },
    set (target, key, val, receiver) {
      const oldVal = target[key]
      const result = Reflect.set(target, key, val, receiver)
      const keys = Reflect.ownKeys(target)
      if (oldVal === val) {
        return true
      }
      if (keys.includes(key)) {
        console.log('已有的属性');
      } else {
        console.log('新增的属性');
      }
      return result
    },
    deleteProperty (target, key, receiver) {
      return Reflect.deleteProperty(target, key, receiver)
    }
  }
  const proxyData = new Proxy(target, proxyConf)
  return proxyData
}