每天一提问

问题

如何监听数据数据变化

definePropety

---

语法

Object.defineProperty(obj, prop, descriptor)

该方法可修改对象上的属性，也可以定义一个新属性，并返回该对象。

这里主要用到了defineProperty的存取描述符

exp:

let value;
let arr = Object.defineProperty([], 0, {
    get() {
        console.log("执行了get")
        return value
    },

    set(newVal) {
        console.log("执行了set")
        value = newVal
    }
});

这样就可以对象的属性进行监听, 但是defineProperty只能重定义读取和设置行为，且每次只能监听单个属性

Proxy

---

语法

let p = new Proxy(target, handler)

对对象定义自定义行为，new Proxy()生成Proxy的实例
不同于defineProperty，Proxy可以重定义更多的行为，如delete，has等

exp:

let p = new Proxy([], {
    get(target, prop) {
        console.log("执行了get")
        return target[prop]
    },

    set(target, prop, value) {
        console.log("执行了set")
        target[prop] = value
    }
})

这样也可以对对象属性进行监听，只不过Proxy只有Proxy的实例才能触发