利用js实现Vue2.0中数据的双向绑定功能

Object.defineProperty了解

【利用js实现Vue2.0中数据的双向绑定功能】语法:

Object.defineProperty(obj, prop, descriptor)
  • obj要定义属性的对象。
  • prop 要定义或修改的属性的名称
  • descriptor 要定义或修改的属性描述符
obj和prop很好理解 比如我们定义一个变量为
const o = {name:'xbhog'}

其中obj指的就是o,prop指的就是o.name 下面我们主要看看descriptor
descriptor目标对象属性的一些特征(是一个对象)
descriptor下有6个参数
参数1:
value:属性值
参数2:
writable:对象属性值是否可以被修改true允许false不允许
参数3:
configurable:对象属性是否可以被删除 true允许false不允许
参数4:
enumerable:对象属性是否可被枚举
参数5:
get():是个函数,当访问该属性的时候,函数自动调用,函数返回值就是该属性的值
参数6:
set():是个函数,当修改该属性的时候,函数自动调用,函数有且只有一个参数,赋值的新值
注意:描述符里的value属性 writable属性 与 get属性 set属性是互斥的关系,只能存在一个
了解了前置知识,我们来实现Vue中的v-model的双向绑定
先看实现代码:
通过js实现数据的双向绑定 - 锐客网
你好:更新数据

首先我们通过document.querySelector获取input以及span标签的Html对象,在定义一个data对象,属性name先为空。
使用事件监听oninput来监听用户输入(该事件在