深入浅出的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...inObject.keys()

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

value修改或新增之后的值

这个不难理解

writable是否可重写

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

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

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

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

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

你可能感兴趣的:(深入浅出的Object.defineProperty())