vue实现动态数据绑定

实现的步骤:

1.监听对象属性的读取与变化

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

语法是 Object.defineProperty(obj, prop, descript)

obj: 目标对象

prop: 需要定义或修改的属性的名字

descript: 将被定义或修改的属性的描述符

描述：

这个方法精确添加或修改对象的属性，我们添加的属性是可以枚举的属性（Object.keys()/ for...in）

对象里面存在是属性描述存在的形式是：

数据描述符：拥有可写入或不可以写入的属性（相当于口令密码）

存取描述符：由一对getter-setter 函数功能来描述的属性（方法）

注意：**描述符**必须是两种形式之一，不能同时是两者。

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

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

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

数据描述符：

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

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

存取描述符同时具有以下可选键值：

1.get：一个给属性提供 getter 的方法，如果没有 getter 则为 undefined。该方法返回值被用作属性值。默认为 undefined。

2.set：一个给属性提供 setter 的方法，如果没有 setter 则为 undefined。该方法将接受唯一参数，并将该参数的新值分配给该属性。默认为 undefined。

示例：

创建属性

var o = {};Object.defineProperty(o, "a", {value : 37,                writable : true,                enumerable : true,                configurable : true});console.log(o.a);Object.defineProperty(o, "b", {get : function(){ /*console.log( bValue)*/ return value },                set : function(newValue){ bValue = newValue; },                enumerable : true,                configurable : true});o.b = 38;

修改属性

当属性特性（property attribute） writable 设置为false时，表示 non-writable，属性不能被修改。

var o = {}; // 创建一个新对象Object.defineProperty(o, "a", { value : 37,                writable : false });console.log(o.a); // 打印 37o.a = 25; // 没有错误抛出（在严格模式下会抛出，即使之前已经有相同的值）console.log(o.a); // 打印 37， 赋值不起作用。

一般的setter 和 getters