proxyTom.aaa.aaa = 0 没有 set 成功，但是 result 返回 true

Question

function reactive(target = {}) {
  if (typeof target !== 'object' || target == null) {
    // 不是对象或者数组直接返回
    return target
  }

  // 代理配置
  const handler = {
    get(target, key, receiver) {
      const ownKeys = Reflect.ownKeys(target)
      //  只处理本身（非原型） 属性---原型的属性例如：push
      if (ownKeys.includes(key)) {
        console.log('get', key)
      }

      const result = Reflect.get(target, key, receiver)
      return reactive(result) // 递归调用实现深度监听
      // 性能如何提升的?
      // 当 get 的时候才递归，不像 vue2 一开始就递归到底
    },
    set(target, key, val, receiver) {
      // 重复的数据或值没有改变不处理
      // 场景：
      // 1. 数组push()的时候，length不用重设；
      // 2. proxyTom.age 已经是 18 再执行  proxyTom.age = 18
      const oldVal = target[key]
      if (val === oldVal) { return true }

      // 判断是新增属性还是修改属性
      const ownKeys = Reflect.ownKeys(target)
      if (ownKeys.includes(key)) {
        console.log('set 修改属性---', key, val)
      } else {
        console.log('set 新增属性---', key, val)
      }

      const result = Reflect.set(target, key, val, receiver)
      console.log('result---', result)
      return result // 是否设置成功 true：成功，false：失败
    },
    deleteProperty(target, key, receiver) {
      const result = Reflect.deleteProperty(target, key)
      console.log('deleteProperty', key)
      console.log('result---', result)
      return result  // 是否删除成功 true：成功，false：失败
    }
  }

  // new 代理对象
  const observed = new Proxy(target, handler)

  return observed
}

const Tom = {
  name: 'Tom',
  age: 18,
  male: 'boy',
  friend: {
    name: 'Jack',
    age: 10,
  }
}

const proxyTom = reactive(Tom)
proxyTom.friend.name

console.log('%c------------------------', 'color:blue')

proxyTom.test = {}

console.log('%c------------------------', 'color:blue')

proxyTom.test.test = 0

console.log('%c------------------------', 'color:blue')

proxyTom.aaa.aaa = 0 // 没有 set 成功，但是 result 返回 true
console.log(Tom)

Answer 1

双越 2021-12-24 08:35:59

proxyTom.aaa 应该是 undefined 吧？之前并没有赋值。

你看下，当 result 返回 true 的时候，上一行代码的 target 打印出什么内容？ 

• 提问者 chyco #1

  proxyTom.aaa它是没有赋值，我想问的是，这种情况是不是需要处理一下才好呢？

• 提问者 chyco #2

  老师我捋了一遍代码，但是不明白的点越来越多了。开始 target 是空的 {}，Reflect.set() 后 target 是 {aaa: 0}，这是我猜想 target 是 proxyTom.aaa  但是我不知道它为什么是 proxyTom.aaa。最后打印 proxyTom.aaa 和 proxyTom.aaa.aaa 都是空的代理对象 Proxy {} 跟上面的 target 是 {aaa: 0} 又不一样了，越想越懵了，希望老师解惑一下。

• 双越 回复 提问者 chyco #3

  我觉得不需要处理，这本来就是自己写的不严谨。