理解前端数据双向绑定原理——Object.defineProperty()

什么是数据双向绑定？

vue是一个mvvm框架，即数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。这也算是vue的精髓之处了

为什么要实现数据的双向绑定？

在vue中，如果使用vuex，实际上数据还是单向的，之所以说是数据双向绑定，这是用的UI控件来说，对于我们处理表单，vue的双向数据绑定用起来就特别舒服了。

即两者并不互斥， 在全局性数据流使用单项，方便跟踪； 局部性数据流使用双向，简单易操作。

Object.definedProperty方法

Object.definedProperty方法可以在一个对象上直接定义一个新的属性、或修改一个对象已经存在的属性，最终返回这个对象。

vue.js的双向数据绑定就是通过Object.defineProperty方法实现的，俗称属性拦截器。

语法

Object.defineProperty(obj, prop, descriptor)

参数

1. obj 需要定义属性的对象。
2. prop需被定义或修改的属性名。
3. descriptor需被定义或修改的属性的描述符。

返回值

函数将返回传递给他的obj对象本身。即第一个参数obj

描述符（descriptor）说明

该方法允许开发者精确的对对象属性的定义和修改。通过正常赋值进行属性添加而构建的属性会被枚举器方法（如for…in循环或Object.keys方法）获取，从而导致属性值被外部方法改变或删除。而Object.defineProperty()可以避免以上描述的情况，默认的，通过Object.defineProperty()添加的属性是默认不可改变的。

对象里目前存在的属性描述符有两种主要形式：

数据描述符（data descriptor）和访问器描述符（accessor descriptor）。

数据描述符就是一个包含属性的值，并说明这个值可读或不可读的对象；访问器描述符就是包含该属性的一对getter-setter方法的对象。

一个完整的属性描述（descriptor）必须是这两者之一，并且不可以两者都有。

数据描述符和访问器描述符各自都是对象，他们必须包含以下键值对：

configurable
是否可以删除目标属性或是否可以再次修改属性的特性（writable, configurable, enumerable）。设置为tr