这个方法的主要用处是用来做数据劫持的,在vue2.x主要使用这个方法,在3.0中换成了proxy做数据劫持,数据劫持就是监听到数据的变化,然后可以做什么等

/* 随便定义一个对象 */
let obj = {
    name: 'hello',
    age: 18,
    child: {
        sex: '女'
    }
}
observer(obj)
function observer(obj) {
    /* 判断传入进来的是否是对象 */
    if (obj.constructor === Object) {
        /* 循环对象 */
        for (let key in obj) {
            /* 如果值不是对象,则做劫持 */
            if (obj[key].constructor !== Object) {
                /* 定义一个临时变量,用于return出去 */
                let _value = obj[key]
                Object.defineProperty(obj, key, {
                    /* 设置属性可以被删除,可以被修改 */
                    configurable: true,
                    /* 设置属性可以被遍历 */
                    enumerable: true,
                    get() {
                        console.log('触发读取')
                        return _value
                    },
                    set(newVal) {
                        console.log('触发修改')
                        _value = newVal
                    }
                })
            } else {
                /* 否则进行递归,再次判断 */
                observer(obj[key])
            }
        }
    }
}
Object.defineProperty的使用

https://blog.sdgou.cc/archives/89.html

作者

白鸽

发布时间

2021-02-23

许可协议

CC BY-SA 4.0