Object.defineProperty()与数据代理Object.defineProperty(person, 'a

Object.defineProperty(person, 'age', { value: 18, })

给person对象添加一个属性age

使用这种方法添加的属性，无法修改、枚举、删除

需要修改这两个属性

    enumerable: true,
    writable: true,
    configurabl:true

invoke property getter

当有人读取person的age时，get被调用，且返回值就是age的值

 let number = 18

 Object.defineProperty(person, 'age', {
    // value: 18,
    // enumerable: true,
    // writable: true,

    // 当有人读取person的age是，get函数（getter）被调用，且返回值就是age的值
    get: function () {
        return number
    }
})

简写 get () { return number },

setter

当有人修改person属性时，seter就会被调用，且会受到修改的具体值

    set(value) {
        console.log(value)
    }

getter 和 setter 不能与赋值和属性一起用

报错Invalid property descriptor. Cannot both specify accessors and a value ...

        // value: 18,
        // enumerable: true,
        // writable: true,

数据代理：通过一个对象对另一个对象中的属性的操作

    let obj1 = { x: 100 }
    let obj2 = { y: 200 }

    Object.defineProperty(obj2, 'x', {
        get() {
            return obj1.x
        },
        set(value) {
            obj1.x = value
        }
    })

Vue中的数据代理

<body>
    <div id="root">
        <h2>学校地址：{{address}}</h2>
    </div>

</body>

<script>
    const vm = new Vue({
        el: '#root',
        data: {
            address: "尚硅谷"
        }
    })
</script>

vue会为data的每个属性生成getter setter

控制台直接访问vm.name，getter工作，把data{}里面的name显示出

控制台vm.name ='atguigu'修改name，触发setter,更改data里的name

vm._data = Vue里面的data，//里面是数据劫持

vue中的数据代理：把data中的数据放到vm中一份（_data）,使用api：Object.defineProperty()，为每一个添加到vm上的属性都指定一个getter/setter。在getter/setter内部去操作data中对应的属性

data中的任何数据发生变化时，vue都会重新解析一边模板