Vue中的Object.defineProperty详解

0nePiece2023-08-15 13:28

Vue中的Object.defineProperty是一个比较重要的方法，它是可以定义对象中属性的一个方法，相比于在对象中直接定义的对象，它更具有灵活性。

直接定义对象中的属性是这样的：

javascript 复制代码

 let person = {
        name:'张三',
        address:'广东',
        age:12,
   }

而Object.defineProperty可以直接在上面的对象中添加属性，如下面所示：

javascript 复制代码

 Object.defineProperty(person,'age',{
        enumerable:true,//该对象的属性是否能被遍历，默认是false
        writable:true,//该属性是否能被修改，默认是false
        configurable:false,//该属性是否能被删除，默认是false
    })

如果用上面的方法进行定义属性的，属性就能变得更加灵活多变。

javascript 复制代码

 let number = 13;

    Object.defineProperty(person,'age',{
        // enumerable:true,
        // writable:true,
        // configurable:false,
        get:function(){
           console.log("有人在读取该属性值");
           return number;
        },
        set:function(value){
           console.log("有人在修改该属性值");
           number = value;
        }
    })

而上面的方法也可以对对象进行灵活的修改和读取。