Vue 3的reactive手写实现

介绍

本文将介绍如何手写实现Vue 3的reactive，涉及到代理对象、代理对象被再次代理和一个对象被代理多次等问题的处理方法。如果您正在学习Vue 3或者对于Vue 3的reactive实现感兴趣，本文可以帮助您更好地理解其原理和实现。

基础版reactive

首先，我们需要定义一个isObject的公共方法，用于判断一个值是否为对象：

export const isObject = (value) => {
  return typeof value === 'object' && value !== null
}

然后，我们使用ES6中的proxy API来创建一个简单的代理对象，实现对象的基本操作：

export function reactive(target) {
  // 需要首先判断是否是对象，不是直接返回
  if (!isObject(target)) return

  const proxy = new Proxy(target, {
    get(target, key, receiver) {
      return Reflect.get(target, key, receiver)
    },
    set(target, key, value, receiver) {
      const result = Reflect.set(target, key, value, receiver)
      return result
    }
  })

  return proxy
}