学会就能看懂vue源码（一）—— 数据属性、访问器属性、Object.defineProperty方法、Object.getOwnPropertyDescriptors方法

前言

了解vue2双向绑定原理，决定从源码入手，引申了不少基础知识，决定记录一下。相信学会这些就能看懂双向绑定原理的部分源码了

---

数据属性

包含的是一个数据值的位置，在这可以对数据值进行读写。

数据属性的四个特性：

• configurable ：表示能否删除从而重新配置定义其属性，能否修改属性的特性，默认为true
• enumerable ：表示能否通过for-in 循环返回属性
• writable ：表示能否修改属性的值
• value ：包含该属性的数据值。默认为undefined

例子：

var obj = {
   
    a: '1'
}
console.log(Object.getOwnPropertyDescriptor(obj,'a'))
// { value: "1", writable: true, enumerable: true, configurable: true }

---

访问器属性

定义：这个属性不包含数据值，包含的是一对get和set方法，在读写访问器属性时，就是通过这两个方法来进行操作处理的。

访问器的四个特性：

• configurable ：表示能否删除从而重新配置定义其属性，能否修改属性的特性，默认为true
• enumerable ：表示能否通过for-in 循环返回属性
• get ：在读取属性时调用的函数，默认值为undefined
• set ：在写入属性时调用的函数，默认值为undefined

注意：访问器属性不能直接定义，要通过Object.defineProperty()这个方法来定义

（稍后与下面的函数一起举例。）

---

Object.defineProperty

在MDN中是这样介绍的

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

语法： Object.defineProperty(obj, prop, descriptor)

参数：

• obj ：要定义属性的对象
• prop：要定义或修改的属性的名称或Symbol
• descriptor：要定义或修改的属性描述符