vue双向绑定源码基础知识(一)—— 数据属性、访问器属性、Object.defineProperty方法

78 阅读2分钟

本文已参与「新人创作礼」活动,一起开启掘金创作之路。

前言

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

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

以上内容相信大家分开来看都明白了,接下来看下一篇文章就能将内容串起来了。