[JavaScript知识库]vue底层原理：object.defineProperty详解

1、Object.defineProperty是给对象添加属性的方法

2、配置项有：

     value：值
     configurable: true, 是否支持删除，默认false;
     writable: true, 是否支持修改，默认值false;
     enumerable: true, 是否可以被遍历，默认为false
     get () {} 属性被调用时，调用次方法获取属性值, 又返回值，
     set (value) {} 属性被修改时，调用此方法去处理对应逻辑

3、使用场景：

定义一个number,再定义一个person，person的age是通过number获取的；如何实现修改number和person的age保持一直，修改其中任意一个两个值都同时改变，（其实就是双向绑定，数据代理）;
Vue底层的数据代理，数据劫持都是用的这个方法。

4、代码演示

let number = 20;
const person = {
    name: '张三',
    sex: '男'
}
Object.defineProperty(person, 'age', {
    // value: 20, // 指定属性的值，和get()方法不能同时使用；
    // configurable: true,
    // writable: true,
    // enumerable: true,
    // 当有人读取person的age属性时，get函数(getter)会被调用，且返回值就是age的值
    get () {
        return number
    },
    // 当有人修改person的age属性时，set函数(setter)会被调用，且会收到修改的具体值
    set (value) {
        number = value;
    }
})
//  测试代码
console.log(person.age) // 20
person.age = 30;
console.log(number) // 30
number = 60;
console.log(person.age) // 60