vue 实现双向绑定的核心方法：Object.defineProperty()

在vue中我们经常使用到 v-model ，但是 v-model 在vue里又是怎么实现的呢？在这其中最核心的就是使用了 Object.defineProperty() 来实现vue的双向绑定。当然在这里我们不讨论vue实现 v-model 的源码，只浅析 Object.defineProperty() 使用方法。

1.什么是Object.defineProperty()

Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。

2.Object.defineProperty()的数据属性（或称 创建属性）

var o = new Object(); // 创建一个新对象

// 在对象中添加一个数据属性的示例
Object.defineProperty(o, "a", {
  value: 37,
  writable: true,
  enumerable: true,
  configurable: true,
});
// 关于数据属性的各项配置（value，writable，enumerable，configurable）代表什么意思可以在这里查看：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty
const propertyA = Object.getOwnPropertyDescriptor(o, 'a')
console.log(propertyA);
console.log(propertyA.get);
console.log(propertyA.set);

在上面的代码中：
首先我们创建了一个对象，并向对象中添加一个数据属性，然后通过 Object.getOwnPropertyDescriptor 函数获取该对象已有的属性描述对象，
然后赋值给propertyA，接着可以看到结果:
{ value: 37, writable: true, enumerable: true, configurable: true }
undefined
undefined

结果显而易见打印 propertyA 是有结果的，我们也可以看到其数据属性。
但是打印 propertyA.get 和 propertyA.set 只返回了undefined，其实原因很简单：我们在以上代码中给对象o添加的是数据属性，而不是访问者属性（至于访问者属性长什么样，接下来会讲），所以当我们去打印对象o的 get 和 set 函数时自然的就会返回undefined。

3.Object.defineProperty()的访问者属性（或称 修改属性）

接下来我们给对象 o 添加访问者属性，也就是 get 和 set 函数！

var o = new Object(); // 创建一个新对象

var bValue = 38;
Object.defineProperty(o, "b", {
  get() {
    return bValue;
  }, 
  set(newValue) {
    bValue = newValue;
  },
  enumerable: true,
  configurable: true,
});
// 对象 o 拥有了属性 b，值为 38
// 很好添加完毕，流浪危险者号神经交互完成！

触发 get 函数
然后我们试图读取b的值(以下的 o.b) 这个时候我们给对象 o 添加了访问者属性的作用就体现出来了，
当我们给一个对象设置了访问者属性时，每当我们去读取这个对象的某个属性，就会触发 Object.defineProperty 里的 get 函数。
然后执行get函数里的操作，所以 o.b 所得到的值便是由 return bValue; 这句返回的 38 。
o.b // 38

触发 set 函数
接下来我们来改变 o.b 的值(以下的 o.b = 77)进而去触发 set 函数，得到的结果是 77 原因同上。当我们去改变这个对象的某个属性时，就会触发 Object.defineProperty 里的 set 函数，然后执行set函数里的操作，所以 o.b = 77 所得到的值便是由 bValue = newValue;这句返回的 77 (其中的newValue值就是新的赋值的值) 。
o.b = 77 // 77

const propertyB = Object.getOwnPropertyDescriptor(o, 'b')
console.log(propertyB);
console.log(propertyB.get);
console.log(propertyB.set);

打印对象 o 已有的属性描述对象，结果如下:
{
get: [Function: get],
set: [Function: set],
enumerable: true,
configurable: true
}
[Function: get]
[Function: set]

结果显而易见打印 propertyB 是有结果的，
而且同时我们也获得了对象 o 的 get 和 set 函数，
哦！