前言

了解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：要定义或修改的属性描述符

返回值：被传递给函数的对象。

以上内容相信大家分开来看都明白了，接下来就是将内容串起来了。

---

Object.getOwnPropertyDescriptors

在有关Vue2双向绑定的observer中大家都知道Object.defineProperty方法了，而这个Object.getOwnPropertyDescriptors方法却比较少人了解。

在MDN中是这样介绍的

Object.getOwnPropertyDescriptor() 方法返回指定对象上一个自有属性对应的属性描述符。（自有属性指的是直接赋予该对象的属性，不需要从原型链上进行查找的属性）

看文档感觉有点似懂非懂的感觉，联合上面的内容来写一个demo来看

// demo
const data = {
    // 数据属性
    _name: "lulu",
    age  : '18' 
}
// 访问器属性
Object.defineProperty(data,'name',{
    enumerable:true,
    configurable: true,
    get: function reactiveGetter(){
        console.log(this._name)
    },
    set: function reactiveSetter(newVal){
        this._name = [newVal]
    }
})
console.log( Object.getOwnPropertyDescriptor(data,'name') )

// { enumerable: true, configurable: true, get: ƒ, set: ƒ }
/** 展开如下
 * configurable: true
 * enumerable: true
 * get: ƒ reactiveGetter()
 * set: ƒ reactiveSetter(newVal)
 * __proto__: Object
 */

简而言之，此方法返回给定对象的某个属性的所有信息，包括有关getter和setter的信息。

---

测验

相信了解以上内容，下面的源码就也能看懂了！（没看懂源码的，动手写一遍demo吧）

⚡️ps：这里只给出与上面相关的源码

// VUE-DEV src/core/observer/index.js
 const property = Object.getOwnPropertyDescriptor(obj, key)
  if (property && property.configurable === false) {
    return
  }

  // cater for pre-defined getter/setters
  const getter = property && property.get
  const setter = property && property.set
  if ((!getter || setter) && arguments.length === 2) {
    val = obj[key]
  }

Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: function reactiveGetter () {
      const value = getter ? getter.call(obj) : val
      // ...
      return value
    },
    set: function reactiveSetter (newVal) {
      const value = getter ? getter.call(obj) : val
      /* eslint-disable no-self-compare */
      if (newVal === value || (newVal !== newVal && value !== value)) {
        return
      }
      if (getter && !setter) return
      // ...
      if (setter) {
        setter.call(obj, newVal)
      } else {
        val = newVal
      }
    }
  })