VUE实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的。那么Object.defineProperty究竟是该如何使用的呢？先看个例子
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title> </head><body><div id="app"><h5 id="txtShow"></h5><input type="text" id="txt"></div><script>// mvvm 分为model(模型) view(视图) viewModel(视图模型)// model 用来存储数据// view 用来展示数据// ViewModel 关联数据,和model实现双向绑定。// 通过Object.defineProperty 定义一个属性// 通过此方法为对象设置属性的时候 对象的属性值会包含一个get和set方法// 当修改对象值得时候回触发相应的函数调用// 参数一 需要定义属性的对象// 参数二 属性名字// 参数三 对象属性的修饰内容 // 在set方法中做一些处理，执行页面的刷新和回调var model = {}; //创建一个新对象var vm = '';Object.defineProperty(model, 'txt', {set: function (val) {console.log('设置属性值');console.log(val);vm = val;txtShow.innerHTML = this.txt;},get: function () {console.log('获取属性值');console.log(this);return vm;},enumerable: true, //可枚举，默认falseconfigurable: true //该属性描述符能够被改变，同时该属性也能从对应的对象上被删除。默认false })var txtShow = document.getElementById('txtShow'),txt = document.getElementById('txt');txt.onkeyup = function () {if (event.keyCode == 13) {model.txt = txt.value;}}</script> </body></html>
通过上面的代码我们可以看到，在控制台，无论是改变vm的值还是model.txt的值，所对应的的，对方的值也会相应的改变，由此，这里我们就实现了双向绑定。
对于Object.defineProperty() ,大家应该都见过，只是认知的程度有所不同。
根据MDN web docs 中解释说： Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象。
语法
Object.defineProperty(obj, prop, descriptor)参数
- 要在其上定义属性的对象。
- 要定义或修改的属性的名称。
- 将被定义或修改的属性描述符。
objpropdescriptor返回值
被传递给函数的对象。
该方法允许精确添加或修改对象的属性。通过赋值操作添加的普通属性是可枚举的，能够在属性枚举期间呈现出来（for...in 或 Object.keys 方法）， 这些属性的值可以被改变，也可以被删除。这个方法允许修改默认的额外选项（或配置）。默认情况下，使用 Object.defineProperty() 添加的属性值是不可修改的。
对象里目前存在的属性描述符有两种主要形式：数据描述符和存取描述符。数据描述符是一个具有值的属性，该值可能是可写的，也可能不是可写的。存取描述符是由getter-setter函数对描述的属性。描述符必须是这两种形式之一；不能同时是两者。
数据描述符和存取描述符均具有以下可选键值：
- 当且仅当该属性的 configurable 为 true 时，该属性
描述符才能够被改变，同时该属性也能从对应的对象上被删除。默认为 false。configurable特性表示对象的属性是否可以被删除，以及除value和writable特性外的其他特性是否可以被修改。 - 当且仅当该属性的
enumerable为true时，该属性才能够出现在对象的枚举属性中。默认为 false。enumerable定义了对象的属性是否可以在for...in循环和Object.keys()中被枚举。 -
数据描述符同时具有以下可选键值：
- 该属性对应的值。可以是任何有效的 JavaScript 值（数值，对象，函数等）。默认为
undefined。 - 当且仅当该属性的
writable为true时，value才能被赋值运算符改变。默认为 false。
valuewritable存取描述符同时具有以下可选键值：
- 一个给属性提供 getter 的方法，如果没有 getter 则为
undefined。当访问该属性时，该方法会被执行，方法执行时没有参数传入，但是会传入this对象（由于继承关系，这里的this并不一定是定义该属性的对象）。 - 默认为
undefined。 - 一个给属性提供 setter 的方法，如果没有 setter 则为
undefined。当属性值修改时，触发执行该方法。该方法将接受唯一参数，即该属性新的参数值。 - 默认为
undefined。
getset - 该属性对应的值。可以是任何有效的 JavaScript 值（数值，对象，函数等）。默认为
configurableenumerable| 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)关键字，将会产生一个异常。
记住，这些选项不一定是自身属性，如果是继承来的也要考虑。为了确认保留这些默认值，你可能要在这之前冻结 Object.prototype，明确指定所有的选项，或者通过 Object.create(null)将__proto__属性指向null。
在日常运用中，那你需要明白：
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 }]
看到这个例子，你心中是不是有了些许想法？后面还有很多知识点，有需要的可以去MDN进行更加深入的了解，谢谢！
 方法的重写)
