数据绑定与数据代理

一、数据绑定

Vue中的数据绑定分为单向数据绑定和双向数据绑定。

• 单项数据绑定：是通过v-bind实现的。

语法：例如v-bind:value = "xxx",简写形式为：v-model = "xxx"，其中xxx是当表达式在执行，而不再是字符串了。

特点：数据只能从data中流向页面。

• 双向数据绑定：是通过v-model实现的。

语法：例如v-model:value = "xxx",简写形式为：v-model = "xxx"。

特点：数据不仅能从data流向页面，还能从页面流向data。

注意：

1.v-model:value之所以能简写成v-model的形式，是因为v-model默认收集的就是value值。

2.v-model这个指令只能用于输入类元素中。因为数据绑定是双向的，只有存在输入才有数据从页面中流向data的可能，才能实现这样一个双向的过程。

二、数据代理

• Object.defineProperty

作用：给某一个对象配置属性用的

Object.defineProperty()的使用需要传入三个参数。第一个参数是：需要给哪个对象添加属性；第二个参数是：添加的属性的名字；第三个参数是：添加属性的配置。

eg.Object.defineProperty(student, 'grade',{})

给student这个对象添加一个grade属性，其中后面的{}是属性的相关配置。可以根据自己的需要，里面会有属性的get()和set()方法。当有人读取student的grade属性时，getter就会被调用，返回的时学生的成绩相关信息；当有人想要修改student的grade属性时，setter就会被调用，当然，set(val)会传入参数。

defineProperty一些基本的配置项：

enumerable——控制属性是否可以被枚举；

writable——控制属性是否可以被修改；

configurable——控制属性是否可以被删除

Object.keys(obj) 方法是 JavaScript 中一个用于获取对象的所有属性名称（键名）的方法，返回一个由属性名组成的数组。obj指的是对象。

• Vue中的数据代理

数据代理：指的是通过一个对象代理另一个对象属性的操作（读/写）。

Vue中的数据代理：是通过vm对象来代理data对象中属性的操作。

好处：当我们访问data中的数据时，可以不用写成vm._data.name而可以直接写成vm.name了；通过数据代理，data中的所有属性都直接出现在了vm身上。更方便了。

基本原理：通过Object.defineProperty()把data对象中所有属性添加到vm上。为每一个添加到vm上的属性，都指定一个getter/setter，在getter/setter内部去操作（读/写）data中对应的属性。