深入浅出的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 ,那么重写的数据无效,还是原先的值。

猜你喜欢

转载自www.cnblogs.com/zdping/p/11165623.html
今日推荐