Vue3 实现reactive响应式（简易版）

响应式原理

Vue 3 的响应式系统基于 Proxy 对象和自定义的依赖收集与触发机制。在 Vue 3 中，响应式对象的创建主要通过 reactive 或 ref 函数完成。reactive 用于创建一个响应式的浅层代理对象，而 ref 则用于创建一个包装值的响应式引用

如何实现

新建reactive.ts文件

export const reactive = <T extends object>(target: T) => {
  return new Proxy(target, {
    get(target, key, receiver) {
      let res = Reflect.get(target, key, receiver)
      return res
    },
    set(target, key, value, receiver) {
      let res = Reflect.set(target, key, value, receiver)
      return res
    }
  })
}

• 使用泛型约束reactive方法为只能传入引用类型（object）
• 返回一个new Proxy对象，在第二个参数传入拦截器（get，set）
• get返回三个参数（target， key, receiver）,set返回四个参数（target, key, value, receiver）
• 使用Reflect进行get，set操作