深入浅出的Object.defineProperty()

vue的原理

观察者模式和订阅-发布者模式。 Vue实例被创建时，会遍历data属性，并通过Object.defineProperty将 这些属性转化为getter/setter，并进行追踪依赖。每当data属性值被修改时，通知watcher 实例，使得跟他相关的组件进行更新。

让我想到Object.defineProperty()在这中间做了哪些事？

Object.defineProperty()是定义或者修改对象的新属性

语法：

Object.defineProperty(obj, prop, descriptor);

参数为：

obj 为目标对象

prop 是定义或修改属性的名字

descriptor 是目标对象属性的特性

返回值为：

原先传递给函数的对象

举个栗子：

  let obj = {
      test: "hello world"
  }
  Object.defineProperty(obj, "test", {
      configurable: true | false,
      enumerable: true | false,
      value: 任意类型的值,
      writable: true | false,
      get:function(){},
      set:function(){}
  })

参数解析

configurable是否可修改或者可删除对象属性

默认为false

enumerable是否可枚举

对象有几种方法去遍历对象的属性，包括 for...in 、 Object.keys() 。

如果 enumerable=false , 那以上的有关遍历的方法均不能用。

value修改或新增之后的值

这个不难理解

writable是否可重写

如果 writable=false ，那么重写的数据无效，还是原先的值。

get在读取属性时调用的函数

访问函数的时候会自动调用这个，返回的值就是value值，默认是undefined

set在设置属性时调用的函数

为函数属性赋新值的时候会自动调用，并且新值作为参数传入。就是这个属性实现了MVVM的双向绑定