vue中的数据代理

一、理解Object.defineProperty方法

Object.defineProperty(obj, prop, descriptor)

obj：就是我们需要定义属性的对象

prop：我们需要定义的属性

descriptor：属性的描述描述符

返回值：返回此对象

let student= {
        name: '李四',
        sex: '男',
    }

// 我们想给student对象加一个classs属性
Object.defineProperty(person,'class',{
    	value: 2
    })

然后在控制台输出：
但是通过这种方式设置的属性是不能被枚举的。必须进行下面的一些设置：

Object.defineProperty(student, 'class', {
    value: 2,
    // enumerable:true, //控制属性是否可以枚举，默认值是false
    // writable:true, //控制属性是否可以被修改，默认值是false
    // configurable:true //控制属性是否可以被删除，默认值是false
    }

如果我们想要通过另一个对象的属性来赋值给当前的student对象的class属性，可以这么做：

<script type="text/javascript">
    let person = {
        class: 2,
    }

    let student = {
        name: '李四',
        sex: '男',
    }
    Object.defineProperty(student, 'class', {
        //当有人读取student的class属性时，get函数(getter)就会被调用，且返回值就是class的值
        get() {
            console.log('有人读取class属性了')
            return person.class
        },

        //当有人修改student的class属性时，set函数(setter)就会被调用，且会收到修改的具体值
        set(value) {
            console.log('有人修改了age属性，且值是', value)
            person.class = value
        }

    })
</script>

然后控制台进行测试：

![在这里插入图片描述](https://img-blog.csdnimg.cn/df68a36d15a44ae199d05363d5a98a25.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA54y_5rCR,size_19,color_FFFFFF,t_70,g_se,x_16

数据代理：通过一个对象代理对另一个对象中属性的操作。
通过person对象代理另一个student对象中class属性的操作就是数据代理。

二、引申到vue中就是：

1.Vue中的数据代理：
	   通过vm对象来代理data对象中属性的操作（读/写）
       通过一个对象来代理另一个对象中属性的操作（读/写）
2.Vue中数据代理的好处：
       更加方便的操作data中的数据
3.基本原理：
      通过Object.defineProperty()把data对象中所有属性添加到vm上。
      为每一个添加到vm上的属性，都指定一个getter/setter。
       在getter/setter内部去操作（读/写）data中对应的属性。

这就是为什么我们不需要写data.name,而是直接写name