VUE实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的。那么Object.defineProperty究竟是该如何使用的呢？先看个例子

 

 

　　通过上面的代码我们可以看到，在控制台，无论是改变vm的值还是model.txt的值，所对应的的，对方的值也会相应的改变，由此，这里我们就实现了双向绑定。

　　对于Object.defineProperty() ,大家应该都见过，只是认知的程度有所不同。

　　根据MDN web docs 中解释说： Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象。

语法

Object.defineProperty(obj, prop, descriptor)

参数

obj

要在其上定义属性的对象。

prop

要定义或修改的属性的名称。

descriptor

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

返回值

    被传递给函数的对象。

　　该方法允许精确添加或修改对象的属性。通过赋值操作添加的普通属性是可枚举的，能够在属性枚举期间呈现出来（ 或 方法）， 这些属性的值可以被改变，也可以被。这个方法允许修改默认的额外选项（或配置）。默认情况下，使用 Object.defineProperty() 添加的属性值是不可修改的。

　　

　　对象里目前存在的属性描述符有两种主要形式：数据描述符和存取描述符。数据描述符是一个具有值的属性，该值可能是可写的，也可能不是可写的。存取描述符是由getter-setter函数对描述的属性。描述符必须是这两种形式之一；不能同时是两者。

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

configurable

当且仅当该属性的 configurable 为 true 时，该属性

描述符才能够被改变，同时该属性也能从对应的对象上被删除。

默认为 false。

configurable特性表示对象的属性是否可以被删除，以及除

value和

writable特性外的其他特性是否可以被修改。

enumerable

当且仅当该属性的

enumerable为

true时，该属性才能够出现在对象的枚举属性中。

默认为 false。

enumerable定义了对象的属性是否可以在   循环和   中被枚举。

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

value

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

默认为 。

writable

当且仅当该属性的

writable为

true时，

value才能被 改变。

默认为 false。

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

get

一个给属性提供 getter 的方法，如果没有 getter 则为 

undefined。当访问该属性时，该方法会被执行，方法执行时没有参数传入，但是会传入

this对象（由于继承关系，这里的

this并不一定是定义该属性的对象）。

默认为 。

set

一个给属性提供 setter 的方法，如果没有 setter 则为 

undefined。当属性值修改时，触发执行该方法。该方法将接受唯一参数，即该属性新的参数值。

默认为 。

 描述符可同时具有的键值

	configurable	enumerable	value	writable	get	set
数据描述符	YES	YES	YES	YES	NO	NO
存取描述符	YES	YES	NO	NO	YES	YES

　　如果一个描述符不具有value,writable,get 和 set 任意一个关键字，那么它将被认为是一个数据描述符。如果一个描述符同时有(value或writable)和(get或set)关键字，将会产生一个异常。

　　记住，这些选项不一定是自身属性，如果是继承来的也要考虑。为了确认保留这些默认值，你可能要在这之前冻结 ，明确指定所有的选项，或者通过 将属性指向。

　　在日常运用中，那你需要明白：

var o = {};o.a = 1;// 等同于 :Object.defineProperty(o, "a", {  value : 1,  writable : true,  configurable : true,  enumerable : true});// 另一方面，Object.defineProperty(o, "a", { value : 1 });// 等同于 :Object.defineProperty(o, "a", {  value : 1,  writable : false,  configurable : false,  enumerable : false});

　　

下面的例子展示了如何实现一个自存档对象。 当设置temperature 属性时，archive 数组会获取日志条目。

function Archiver() {  var temperature = null;  var archive = [];  Object.defineProperty(this, 'temperature', {    get: function() {      console.log('get!');      return temperature;    },    set: function(value) {      temperature = value;      archive.push({ val: temperature });    }  });  this.getArchive = function() { return archive; };}var arc = new Archiver();arc.temperature; // 'get!'arc.temperature = 11;arc.temperature = 13;arc.getArchive(); // [{ val: 11 }, { val: 13 }]

看到这个例子，你心中是不是有了些许想法？

　　后面还有很多知识点，有需要的可以去进行更加深入的了解，谢谢！