【深入浅出系列】defineProperty

Vue.js比较好用的一点是双向数据绑定，而双向数据绑定的实现就是Object.defineProperty()，在探索这个方法之前，我们先用代码实现一个简易的数据响应。

这里当我们修改data.info的值的时候就会动态的反馈到HTML元素上。这里的核心就是set定义了在给data对象设置值的时候会自动执行set中的代码，从而达到了数据绑定的效果。起到了一个触发器的效果。不过这也仅仅只是一个简易版本的示例代码，实际上Vue.js在实现双向数据绑定的时候还有用到Wacher和Directive，我们这里将不再进行拓展。那么接下来，我们就一起探索一下Object.defineProperty()的一些东西吧。

语法

Object.defineProperty(object, prop, descriptor)

参数

• object：被操作的对象
• prop：要修改或新增的属性的名称
• descriptor：属性描述符

属性描述符

属性描述符（descriptor）是对属性的描述，分为两类：

• 数据描述符
• 存取描述符

数据描述符

可选键值有

value

要设置的具体的值。可以是任何有效的JS值，默认值是undefined。

writable

规定该属性是否可被赋值运算符(=)改变，默认值是false。

当我们去修改data.name的值的时候，因为writable为false，是不允许被赋值运算修改的。当然不设置writable的值也是一样的，因为其默认值就是false。

enumerable

定义了对象的属性是否可以在for...in循环和Object.keys()中被枚举。其默认值是false。

当我们执行Object.keys(data)得到的就是['age', 'sex']。

configrable

主要是描述属性是否可以配置以及是否可以被删除。

当configrable被设置为false的时候，对应的属性不可被重复定义或者删除。

当configrable被配置为true的时候，对应的属性可以被重复定义和删除。

存取描述符

get

就是属性的一个getter的方法，如果没有getter则为undefined。该方法返回值被作为属性的值。默认值是undefined。

set

就是属性的一个setter的方法，如没有setter则为undefined。该方法将接受唯一参数，这个参数就是新值。其默认值是undefined。

数据描述符对应的默认值如下：

在这里需要注意的是，我们使用两种不同的方式对属性进行赋值的时候，他们所使用到的默认值是不一样的，书写代码的时候是需要稍微注意的。