How to use object.definepProperty, vue2 two-way binding principle

The first thing to introduce is the three parameters of definepProperty

object.definepProperty(对象名，属性名，属性值)

Furthermore, what I want to introduce is the attribute value.

object.definepProperty(person，age，{value:18})

 At this time we will encounter the following problems

1. First, the attribute name we added cannot be enumerated.

object.definepProperty(person，age，{value:18})

object.keys(person)

for(var item in person){
    console.log(item)
}

Solution:

We add enumerable properties to it. enumerable:true, the default value is false

Object.defineProperty(obj, 'age', {
  value: "18",
  enumerable: true
});

2. Second, the attribute name we added cannot be modified.

object.definepProperty(person，age，{
value:18
enumerable:true
})

person.age =20

Solution: Add the writeable: true (can be modified) attribute, the default value is false (cannot be modified)

object.definepProperty(person，age，{
value:18,
enumerable:true, //控制属性是否可以枚举,默认值是false
writeable:true // 控制属性是否可以被修改，默认值是false
})

person.age =20

3. Third, the attribute name we added cannot be deleted.

object.definepProperty(person，age，{
value:18,
enumerable:true, //控制属性是否可以枚举,默认值是false
writeable:true // 控制属性是否可以被修改，默认值是false
})

delete person.age 
//或者
delete person['age']

Solution: add configurable: true (can be deleted), default value false (cannot be deleted)

Object.defineProperty(person.age,{
value:18,
enumerable:true, //控制属性是否可以被枚举，默认值false
writerable:true,  // 控制属性是否可以被修改,默认值false
configrable:true //控制属性是否可以被删除,默认值false
})

4. Usage of get(gtter) and set(setter)

1. When assigning the value number of another variable to age, when the value of number is changed, the value of age in the object does not change.

number=10

person={
age:number
}
// {age:10}

number =12

//{age:10}

Solution, at this time we have to use the get() function to achieve it. The return value of get is the value of age.

get(): When someone reads the age attribute of person, the get() method will be called, and the current value of number will be assigned to age.

object.definepProperty(person，age，{
    get(){
        return number
    }
})

2. When someone assigns a value to age, the value of age does not change. This is because the value of age is number.

var number =10

person={
    age:number
}
person.age =20
// {age:10}

Solution: Use the set() function to get the changed value of age, and then assign it to number

set(): When someone changes the age, get the changed value and assign it to number. At this time, when we get the age again, we will call get() to assign the value of number to age

object.definepProperty(person，age，{
    // 当有人获取age时候，就会调用get()
    get(){
        return number
    }，
    //当有人改变age的时候，就会调用set()
    set(value){
    number = value
}
})