属性拦截器(Object.defineProperty)，以及VUE中的双向数据绑定简单实现

vue.js是通过它实现双向绑定的。俗称属性拦截器或者前端数据劫持。

首先看一下官方的定义：

一、Object.defineProperty()
方法会直接在一个对象上定义一个新属性，或者修改一个已经存在的属性， 并返回这个对象。

语法：
Object.defineProperty(obj,prop,descriptor)

参数：
1.obj：需要定义属性的对象。

2.prop：需定义或修改的属性的名字。

3.descriptor：将被定义或修改的属性的描述符。

返回值：

返回传入函数的对象，即第一个参数obj。
对象里目前存在的属性描述符有两种主要形式：数据描述符和存取描述符。数据描述符是一个拥有可写或不可写值的属性。存取描述符是由一对 getter-setter 函数功能来描述的属性。描述符必须是两种形式之一；不能同时是两者。

数据描述符和存取描述符均具有以下可选键值：

configurable
当且仅当该属性的 configurable 为 true 时，该属性描述符才能够被改变，也能够被删除。默认为 false。

enumerable
当且仅当该属性的 enumerable 为 true 时，该属性才能够出现在对象的枚举属性中。默认为 false。

数据描述符同时具有以下可选键值：

value
该属性对应的值。可以是任何有效的 JavaScript 值（数值，对象，函数等）。默认为 undefined。

writable
当且仅当该属性的 writable 为 true 时，该属性才能被赋值运算符改变。默认为 false。

存取描述符（第三个参数对象）同时具有以下可选键值：

get
一个给属性提供 getter 的方法，如果没有 getter 则为undefined。当我们读取某个属性的时候，其实是在对象内部调用了该方法，此方法必须要有return语句。该方法返回值被用作属性值。默认为 undefined。

set
一个给属性提供 setter 的方法，如果没有 setter 则为 undefined。该方法将接受唯一参数，并将该参数的新值分配给该属性。默认为 undefined。也就是说，当我们设置某个属性的时候，实际上是在对象的内部调用了该方法。

要注意的一点是：在 descriptor 中不能同时设置访问器（get 和 set）和 wriable 或 value，否则会错，就是说想用 get 和 set，就不能用 writable 或 value 中的任何一个。

写个小例子：

代码段：

1.png

视图显示：

2.png

1s后的视图显示

3.png

2s后的视图显示

4.png

说这么多，也就是我们可以在页面监听某个变量，当变量发生变化的时候，我们就更新对应的视图。由数据来驱动视图的更新，vue .js的核心思想就是这个。

二、数据双向绑定：

数据模型和视图之间的双向绑定，用户在视图上的修改会自动同步到数据模型中，同样的，如果数据模型中的值发生变化，也会同步到视图中去。

优点：双向绑定在一些需要实时反应用户输入的场合会非常方便（比如多级联动菜单）

最经常应用的场景：表单

代码示例：

5.png

视图显示：

6.png

注意：
Vue 虽然通过 v-model 支持双向绑定，但是如果引入了类似redux的vuex，就无法同时使用 v-model。
详情参见：https://github.com/vuejs/vuex/blob/master/docs/zh-cn/forms.md

总结：
单向绑定跟双向绑定在功能上基本上是互补的，所以我们可以在合适的场景下使用合适的手段。比如在UI控件中(通常是类表单操作)，会使用双向的方式绑定数据；而其他场景则统一采用单向方式构建。