Object.defineProperty 数据劫持

2,025 阅读1分钟

参考自 bilibili 的 up主:我是小野森森(响应式原理)

面试的时候一直被问到 vue响应式 的原理,也一直似懂非懂,直到看到这个视频后,透彻了

Object.defineProperty(obj:对象, prop:key, descriptor:属性和方法)
let obj = {}
Object.defineProperty(obj,'a',{
    configurable: true    //是否允许删除
    enumerable:true      //是否允许枚举
    value:undefined      //就是value值
    writable:true        //是否允许赋值   
    
    get() {}    //获取的return的值
    set(newVal) {}    //修改的时候执行  newVal就是最新的值
})

//区别在于单个截止和多个劫持
Object.defineProperties(obj,{
    a:{
        get() {
            //需要return 否则会返回 undefined
            return 1
        }
        set(newVal) {
            //newVal 是给属性 a 最新赋的值
            //可以执行函数、dom操作等一些方法
        }
    },
    b:{
        get() {}
        set() {}
    }
})