Object.defineProperty与Vue数据代理

目录

Object.defineProperty

注意

数据代理

Vue中的数据代理：

Vue中数据代理的好处：

基本原理：

---

Object.defineProperty

<script>
    let number = 10
    let person = {
        id: 1,
        name: '张三',
    }
    Object.defineProperty(person, 'age', {
        //value: 18,  //设置age的值
        // enumerable:true, //控制属性是否可以枚举，默认值是false
        // writable:true, //控制属性是否可以被修改，默认值是false
        // configurable:true //控制属性是否可以被删除，默认值是false
        //当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
        get() {
            console.log('有人读取age属性了')
            return number
        },
        //当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值
        set(value) {
            console.log('有人修改了age属性，且值是', value)
            number = value
        }
    })
    console.log(person)
</script>

注意

value,writable和get,set只能写一个

数据代理

通过一个对象代理对另一个对象中属性的操作（读/写）

<script>
    let obj = { x: 100 }
    let obj2 = { y: 200 }
    Object.defineProperty(obj2, 'x', {
        get() {
            return obj.x
        },
        set(value) {
            obj.x = value
        }
    })
</script>

Vue中的数据代理：

通过vm对象来代理data对象中属性的操作（读/写）

Vue中数据代理的好处：

更加方便的操作data中的数据

基本原理：

通过Object.defineProperty()把data对象中所有属性添加到vm上。

为每一个添加到vm上的属性，都指定一个getter/setter。

在getter/setter内部去操作（读/写）data中对应的属性。