实现Vue中数据的绑定 

56 阅读1分钟

1 Object.defineProperty了解

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

① obj 要定义属性的对象。

② prop 要定义或修改的属性的名称。

③ descriptor 要定义或修改的属性描述符。

1)objprop很好理解 比如我们定义一个变量为

const o = { name : 'xbhong' }

2)其中obj指的就是o,prop指的就是o.name 下面我们主要看看descriptor

descriptor 目标对象属性的一些特征(是一个对象)

1664516951289.jpg

注意:描述符里的value属性 writable属性 与 get属性 set属性是互斥的关系,只能存在一个

2 了解前置知识后,我们来实现Vue中的v-model的双向绑定。

1664517061534.jpg

1664516762494.jpg

首先我们通过document.querySelector获取input以及span标签的Html对象,在定义一个data对象,属性name先为空。

使用事件监听oninput来监听用户输入(该事件在 <input> 或 <textarea> 元素的值发生改变时触发)。

1664517119152.jpg

利用Object.defineProperty劫持用户输入的数据。

1664517153636.jpg

1664516816194.jpg