Shulou(Shulou.com)05/31 Report--

Most people do not understand the knowledge points of this article "how to use Object.defineProperty in Vue", so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "how to use Object.defineProperty in Vue" article.

Object.defineProperty understanding

Definition: the Object.defineProperty () method defines a new property directly on an object, or modifies an existing property of an object and returns it.

First, directly add let person = {name:' Zhang San', sex:' male',} Object.defineProperty (person,'age', {value:18, enumerable:true,// controls whether the attribute can be enumerated. The default value is false. When the value of the attribute is true, the attribute will appear in the enumerated attribute of the object. Writable:true,// controls whether a property can be modified. The default value is false. When the value of the property is true, it can be changed by the assignment operator. Configurable:true,// controls whether an attribute can be deleted. The default value is false, and when the value of the attribute is true, the attribute performance is removed from the corresponding object. }) console.log (person); second, use getter, setterlet age_number = 18 Object.defineProperty person = {name:' Zhang San', sex:' male',} Object.defineProperty (person,'age', {/ / value:18, / / enumerable:true,// to control whether the attribute can be enumerated, the default value is false, when the value of the attribute is true, the attribute will appear in the enumeration property of the object. / / writable:true,// controls whether the property can be modified. The default value is false. When the value of the property is true, it can be changed by the assignment operator. / / configurable:true,// controls whether the attribute can be deleted. The default value is false. When the value of the attribute is true, the attribute performance is removed from the corresponding object. Get () {console.log ("read age attribute"); return age_number;}, set (value) {console.log ("modify the value of age"); age_number = value;}}) console.log (person); Object.defineProperty () attention is required

1. When you create a new property with the Object.defineProperty method, if you do not specify that the default value of the configurabel,enumberable,writable property is false, there is no limit to modifying the defined attribute property.

If the 2.Configurable property is defined as non-configurable, it cannot be changed back to configurable. Calling Object.defineProperty to modify features other than writable will report an error.

3. Simulate access and setting behavior: if you want the accessor property to simulate the default behavior, you must add a new property to it or it will result in a circular reference

Var obj= {return this.a; 1}; Object.defineProperty (obj, "a", {get:function () {return this.a;}, set:function (val) {this.a=val}}); obj.a;// Maximum call stack size exceeded

It will cause circular references, and the crazy call will not stop.

Person.a → get.call (person) → this.a → person.a → get.call (person) → this.a. The above is about the content of this article on "how to use Object.defineProperty in Vue". I believe we all have some understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.