Vue3.x的数据代理

先来说简单的吧

Vue 3.x 的数据绑定是通过事件代理 proxy 事件代理的形式
同时 proxy 可以接收两个参数，一个是 target（代理数据），一个是 handler
handler 里面提供了诸多方法，其中在这里使用的只有三个（get(), set(), deleteProperty()）
handler 诸多方法中，又有对应的静态方法，就是允许执行

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)