“This is the first day of my participation in the Gwen Challenge in November. See details of the event: The last Gwen Challenge in 2021”.

DefineProperty basic use

There are many ways to add attributes to an object. DefineProperty is one of them and it’s not very convenient to write — right? But there is even a reasonable one.

  • Define two base objects
Var job = {type: 'Java ', time: 3, age: 18}Copy the code
  • Enumerable controls whether a property can be enumerated

Object.defineProperty(person,'age',{
    value: 18
})
console.log(person,job)
Copy the code



To become enumerable, just enumerable: True

Object. DefineProperty (person,'age',{value: 18, Enumerable: true // Defaults to false})Copy the code

  • Writable Controls whether a property can be modified
Object.defineProperty(person,'age',{ value: 18, enumerable: true, writable: Keys (person,job, object.keys (person), object.keys (job))Copy the code

When a writable: false



When a writable: true

  • The property of the control system can be deleted
Object.defineProperty(person,'age',{ value: 18, enumerable: true, writable: true, configurable: Age delete job.age console.log(person,job, object.keys (person), object.keys (job))Copy the code

When the configurable: false



When the configurable: true

Advanced usage, data broker

  • The use of getter is as follows. Do you see any difference? First of all, person.age should be (…) at first. As a mapping, when you click, it goes back to actually read the actual value

    Getter adds: even if get:function(){} put together (key:value) can be called a getter, or get functions can be called a getter. And the setter down here should be easy to understand as well.Copy the code

  • When setters are used, when number=20 at first, when changing number (step 3), person.age is changing, and when changing Person. age (step 4), number ends up changing

  • In summary, when two seemingly unrelated objects (variables) can be associated (mapped, proxyed) through getters and setters of the Object.defineProperty() method to achieve a synchronous update operation.

Application in Vue

  • To clarify the data defined by data in Vue, let’s look at the code in VsCode below. When accessing data in data, do we have the following two questions?
  1. Did you think of vm.data.name?
  2. How can the data in data be accessed under vm.name?

Answer question 1:

  1. Vm. data does exist, but the data is stored in vm._data as shown below

Answer question 2:

  1. Vm. name is simply a mapping (proxy) out, and when the data in _data changes, the vm.name is automatically updated.

  2. The real data interaction is through the getter and setter of arrow 3 to serve the variable name, thus synchronizing at read time.

  3. When we fetch or change the vm.data.xxx data from the instance VM, we synchronize it.

  4. Vm. _data===data = vm._data== data= vm._data= vM. _data== data= vM. _data= vM. _data= vM. _data= vM. _data= vM. _data= vM. _data= vM. _data= vM. _data= vM. _data= vM. _data= vM. _data= vM. _data= vM. _data= vM. _data= vM. _data= vM. _data= vM. _data= vM. _data



    Summary: In Vue data, we did a data proxy, the data in data proxy to the instance, in order to make coding more convenient.