Vue3响应式原理Proxy

---

Vue2的响应式可以参看我的另一篇文章[极简系列—vue 响应式实现(2.x)]

数据响应式，拦截存储行为

Vue3的响应式主要是基于ES6的新特性Proxy实现，(https://blog.csdn.net/hncu1990/article/details/118856626)
Vue3响应式处理主要用到了ES6的Proxy，Reflect

Vue3响应式涉及到的ES6用法可参见阮一峰老师的教程
Proxy
Reflect

Vue2响应式缺陷：

• 性能不好，需要对每一个key循环递归处理，特别是处理大数据尤为明显
• 对新添加的属性不支持，需要提供额外的方法如Vue.$set
• 对数组支持行不好，数组的响应式通过覆盖数组的原型方法实现

Vue3响应式优点

• 新添加属性/删除属性可以很好的支持
• proxy惰性递归
• 数组的响应式天然支持，不需要特殊处理

最简单实现

function reactive(obj) {
  return new Proxy(obj, {
    get(target, key, receiver) {
      console.log('get')
      const ret = Reflect.get(target, key, receiver)
      return ret
    },
    set(target, key, value, receiver) {
      console.log('set')
      const ret = Reflect.set(target, key, value, receiver)
      return ret
    }
  })
}

测试结果，新添加的属性同样支持拦截

const obj = reactive({ foo: 'foo', childObj: { str: 'xxxxx' } })
obj.foo
obj.foo = 'fooooo'
obj.baz = 'bazzzz'

嵌套对象处理

const isObject = obj => obj !== null && typeof obj === 'object'
function reactive(obj) {
  if (!isObject) {
    return obj
  }
  return new Proxy(obj, {
    get(target, key, receiver) {
      console.log('get', key)
      const ret = Reflect.get(target, key, receiver)
      return isObject(ret) ? reactive(ret) : ret
    },
    set(target, key, value, receiver) {
      console.log('set', value)
      const ret = Reflect.set(target, key, value, receiver)
      return ret
    },
    deleteProperty(target, key, receiver) {
      console.log('delete')
      const ret = Reflect.deleteProperty(target, key, receiver)
      return ret
    }
  })
}