手写reactive和shallowReactive

先来说简单的吧

shallowReactive（浅的拷贝）

function shallowReactive(target) {
  if (target && typeof target === 'object') return new Proxy(target, reactiveHandler)

  return target
}

reactive（深的拷贝）

function reactive(target) {
  if (target && typeof target === 'object') {
    if (Array.isArray(target)) {
      target.forEach((_, i) => {
        target[i] = reactive(_)
      })
    } else {
      Object.keys(target).forEach((_) => {
        target[_] = reactive(target[_])
      })
    }
    return new Proxy(target, reactiveHandler)
  }

  return target
}

handler

const reactiveHandler = {
  get(target, property, receiver) {
    console.log('拦截到了读取', target, property, receiver)
    return Reflect.get(target, property, receiver)
  },
  set(target, property, receiver) {
    console.log('拦截到了修改/新增', target, property, receiver)
    return Reflect.set(target, property, receiver)
  },
  deleteProperty(target, property) {
    console.log('拦截到了删除', target, property)
    return Reflect.deleteProperty(target, property)
  }
}

测试数据

    const user = shallowReactive({
      name: '哈哈哈',
      age: 20,
      likes: ['吃饭', '睡觉', '打豆豆'],
      obj: {
        name: '嘻嘻嘻',
      },
    })
	// user.name += 'aaa'
	// user.car = '奔驰'
	// delete user.age
	// console.log(user)

    const user = shallowReactive({
      name: '哈哈哈',
      age: 20,
      likes: ['吃饭', '睡觉', '打豆豆'],
      obj: {
        name: '嘻嘻嘻',
      },
    })
    // ...操作
    console.log(user2)