vue源码阅读-Object.defineProperty
在vue2中,这个 js 原生API就是整个vue2的核心了。
我们先来看一下官方文档对该属性的描述:
Object.defineProperty()
允许精确地添加或修改对象上的属性。
Object.defineProperty
的语法如下:
1 | Object.defineProperty(obj, prop, descriptor) |
下面是它的参数介绍:
obj
要定义属性的对象。prop
一个字符串或Symbol
,指定了要定义或修改的属性键。descriptor
要定义或修改的属性的描述符。
不知道你是不是有这样的疑问,descriptor
到底是个啥?这里呢,我们来了解一下:
对象的属性描述符
是一个用于描述对象属性特性的配置对象,它包含以下可选属性:
value
: 属性的值,默认为undefined
。用于设置属性的初始值。writable
: 布尔值,默认为false
。如果为true
,则属性的值可以被修改,否则为只读属性。enumerable
: 布尔值,默认为false
。如果为true
,则属性可以通过for...in
循环和Object.keys()
方法枚举,否则不可枚举。configurable
: 布尔值,默认为false
。如果为true
,则属性的描述符可以被修改,也可以通过delete
删除属性,否则不可修改和删除。get
: 一个函数,默认为undefined
。用于获取属性值时调用的 getter 函数。set
: 一个函数,默认为undefined
。用于设置属性值时调用的 setter 函数。
我们来做一个示例,一个一个的来了解:
value
1 | const myObj = {}; |
在上面的例子中,myObj
对象的 name
属性被定义为一个属性描述符对象,vaule为该属性的默认值:
value
为'chuyuxuan'
,表示初始值为'chuyuxuan'
。

writable
1 | const myObj = {}; |
默认为 false
。如果为 true
,则属性的值可以被修改,否则为只读属性。


enumerable
默认为 false
。如果为 true
,则属性可以通过 for...in
循环和 Object.keys()
方法枚举,否则不可枚举。
1 | const myObj = {}; |


configurable
configurable
: 布尔值,默认为 false
。如果为 true
,则属性的描述符可以被修改(及可以再次通过 definePorperty改动),也可以通过 delete
删除属性,否则不可修改和删除。让我们来看一下示例:
1 | const myObj = {}; |


get 与 set
get
: 一个函数,默认为undefined
。用于获取属性值时调用的 getter 函数。set
: 一个函数,默认为undefined
。用于设置属性值时调用的 setter 函数。
⚠️注意: MDN 中有这样一句话:如果描述符没有 value
、writable
、get
和 set
键中的任何一个,它将被视为数据描述符。如果描述符同时具有 [value
或 writable
] 和 [get
或 set
] 键,则会抛出异常。 也就是说,writable
,value
与 get
,set
是互斥的, 如果同时存在,会抛出异常。
1 | const obj = { |

如上图,当我们调用的时候,触发了对应的函数。