vue2的深度监听可以改成和Proxy一样get的时候深度监听吗？

Question

vue2的深度监听可以改成和Proxy一样get的时候深度监听吗？如果可以的话为什么不这样做呢？

Answer 1

双越 2021-03-16 14:13:47

答案是：不可以。

课程里有一个和你一样的问题，你去搜一下，里面有我的回复，也有其他同学的回复，很详细。

• Ivan李岩 #1

  我也想问这个问题，没找到您的回复，能再这里解答下么？

• 双越 回复 Ivan李岩 #2

  大概意思是：Proxy 就像一个工厂函数，它可以直接封装并返回一个带有监听特性的新对象。而 defineProperty 更像是一个装饰器，它需要主动去调用执行，才能给对象添加上监听的特性。所以，defineProperty 无论如何都要深度递归去绑定，没法像 Proxy 一样。

• 慕婉清8096975 回复 双越 #3

  可以考虑如下情况 const obj = {a:{b:{c:10}}}
  
  设置 a.b.c =20
  
  使用defineProperty时，在初始化响应时如果不递归设置setter和getter，是不会触发a.b的getter的，那么响应式就是失效的。
  
  Proxy由于可以触发a.b的getter所以还可以需要的时候再添加响应式

Answer 2

慕移动8175742 2021-04-13 11:06:09

function observer(target) {
    if (typeof target !== 'object' || target == null) {
        return target;
    }
    
    for (let key in target) {
        let value = target[key];
        
        Object.defineProperty(target, key, {
            get() {
                console.log('[Trigger Get]', key);
                return observer(value);
            },
            set(newV) {
                console.log('[Trigger Set]', newV);
                value = newV;
            }
        });
    }
    return target;
}

var obj = {
    a: {
        b: 1
    }
};

observer(obj);

obj.a = 2;

这样可以吗 ?

Answer 3

qq_孙延_03214931 2021-04-03 22:30:22

是因为Object.defineProperty实现监听的时候需要for循环而proxy不需要循环 改写后性能反而不好   的原因吗？

• 双越 #1

  你都使用 for 循环了，那不就是一次性递归完成吗（跟 vue2 目前是一样的）

Answer 4

msidolphin 2021-03-22 23:01:33

你初始化的时候不去深度监听，后续获取值的时候怎么会进入到getter呢？

• 慕粉3871079 #1

  不初始化 怎么做到监听呢？

• msidolphin 回复 慕粉3871079 #2

  我这不是说不能在get时候再监听吗。。。要一次性递归监听完