Object.defineproperty () : VUE3 is no longer used but you should know about it

Define a new property directly on an object, or modify an existing property of an object, and return the object.

This method allows you to precisely add or modify attributes of an object.

Common attributes added through assignment operations are enumerable and can be rendered during attribute enumeration (for… In or object. keys methods), the values of these properties can be changed or deleted.

This method allows you to modify additional options (or configurations) by default, such as whether they are read-only and cannot be written; Can be for.. In or object.keys () traverses.

By default, attribute values added using Object.defineProperty() are not modifiable.

Syntax: Object.defineProperty(obj, prop, Descriptor)

Object.defineProperty(obj, prop, descriptor)
Copy the code

parameter

Return value: The object passed to the function. That’s the first parameter obj

There are two forms of use: data description and accessor description

Attribute descriptor

// Data description
Object.defineProperty(obj,"key", {configurable:true | false.enumerable:true | false.value: A value of any type,writable:true | false
});

Accessor description
Object.defineProperty(obj,"newKey", {configurable: true | false
    enumerable: true | false
    get:function (){return xxx} | undefined.set:function (value){} | undefined
});
Copy the code

Both data descriptors and access descriptors are available

Different: Specifies whether the features can be deleted or modified again

Enumerable: Whether it is enumerable

Unique data descriptors

Value: indicates the value of the attribute

Writable: value Indicates whether the value can be rewritten

Unique access descriptor

Get When accessing the property, the method is executed (must return)

Set Triggers execution of the method when the property value is modified

When using the GET or set methods, the writable and value attributes are not allowed

Example descriptor

Whether the features can be deleted or modified again is optional

1. Whether the target attribute can be deleted using delete
2. The target property (Writable, different, Enumerable) can be configured again

/ / -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - test whether a target attribute can be delete -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
var obj = {}
// The first case: the 64x is set to false and cannot be deleted.
Object.defineProperty(obj,"newKey", {value:"hello".writable:false.enumerable:false.configurable:false
});
console.log( obj.newKey ); //hello
delete obj.newKey;// Delete attributes
console.log( obj.newKey ); //hello(delete invalid)

// The second case: the 64x is set to true and can be deleted.
Object.defineProperty(obj,"newKey", {value:"hello".writable:false.enumerable:false.configurable:true
});
console.log( obj.newKey ); //hello
delete obj.newKey;// Delete attributes
console.log( obj.newKey ); //undefined(delete valid)


/ / -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- the test whether can again change features -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
var obj = {}
// The first case is that the signals are set to false and cannot be modified again.
Object.defineProperty(obj,"newKey", {value:"hello".writable:false.enumerable:false.configurable:false
});

// Modify the feature again
Object.defineProperty(obj,"newKey", {value:"hello".writable:true.enumerable:true.configurable:true
});
console.log( obj.newKey ); Uncaught TypeError: Cannot define property: newKey

// The second case: the 64x is set to true, and the features can be modified again.
Object.defineProperty(obj,"newKey", {value:"hello".writable:false.enumerable:false.configurable:true
});

// Modify the feature again
Object.defineProperty(obj,"newKey", {value:"hello".writable:true.enumerable:true.configurable:true
});
console.log( obj.newKey ); //hello
Copy the code

Enumerable Whether erable is enumerable

Whether this property can be enumerated (using for… In or Object. The keys ())

var obj = {}
// Enumerable is set to false and cannot be enumerated.
Object.defineProperty(obj,"newKey", {value:"hello".writable:false.enumerable:false
});

// Enumerates the properties of the object
for( var attr in obj ){
    console.log( attr );  
}
// Enumerable is true and can be enumerable.
Object.defineProperty(obj,"newKey", {value:"hello".writable:false.enumerable:true
});

// Enumerates the properties of the object
for( var attr in obj ){
    console.log( attr );  //newKey
}
Copy the code

Value: indicates the value of an attribute

var obj = {}
// The value attribute is not set
Object.defineProperty(obj,"newKey"{});console.log( obj.newKey );  //undefined
------------------------------
// Set the value attribute
Object.defineProperty(obj,"newKey", {value:"hello"
});
console.log( obj.newKey );  //hello
Copy the code

Whether the value of the writable property can be overridden

var obj = {}
// First case: writable is set to false and cannot be overridden.
Object.defineProperty(obj,"newKey", {value:"hello".writable:false
});
// Change the value of newKey
obj.newKey = "change value";
console.log( obj.newKey );  //hello

// If writable is set to true, it can be overwritten
Object.defineProperty(obj,"newKey", {value:"hello".writable:true
});
// Change the value of newKey
obj.newKey = "change value";
console.log( obj.newKey );  //change value

//------------------------
// Attributes added when defining objects are deletable, rewritable, and enumerable.
var obj = {
    test:"hello"
}

/ / value
obj.test = 'change value';

console.log( obj.test ); //'change value'

Object.defineProperty(obj,"test", {writable:false
})


// Overwrite the value again
obj.test = 'change value again';

console.log( obj.test ); // still: 'change value'
Copy the code

get/set

1. Get is a way to get the value of an attribute
2. Set is a method of setting the value of a property.

var obj = {};
var initValue = 'hello';
Object.defineProperty(obj,"newKey", {get:function (){
        // The function that fires when a value is fetched
        return initValue;    
    },
    set:function (value){
        // The function that is triggered when a value is setinitValue = value; }});/ / get the value
console.log( obj.newKey );  //hello

/ / set the value
obj.newKey = 'change value';

console.log( obj.newKey ); //change value

Copy the code

Data description

When modifying or defining a property of an object, add properties to that property

var obj = {
    test:"hello"
}
// Add a property description to an existing property of the object
Object.defineProperty(obj,"test", {configurable:true | false.enumerable:true | false.//value: ", do not add value description if added, the original value changes when writable is true
    writable:true | false
});
// The property description of the newly added property of the object
Object.defineProperty(obj,"newKey", {configurable:true | false.enumerable:true | false.value: can be any type of value,writable:true | false
});
Copy the code

Accessor description

When using accessors to describe properties, it is possible to set the following properties:

var obj = {};
Object.defineProperty(obj,"newKey", {get:function (){} | undefined.set:function (value){} | undefined
    configurable: true | false
    enumerable: true | false
});
Copy the code

Note: When using getter or setter methods, the writable and value properties are not allowed