vue双向数据绑定原理Object.defineProperty详解

最新推荐文章于 2022-03-16 21:53:14 发布

原创最新推荐文章于 2022-03-16 21:53:14 发布 · 置顶 · 552 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javaScript #vue双向数据绑定原理 #Object.defineProperty #vue学习记录 #vue

vue学习记录专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现数据绑定的方法，通过Object.defineProperty定义对象属性的get和set方法，实现在输入框中输入数据时自动更新对象属性，以及对象属性变化时自动更新输入框显示值的双向数据绑定。

源代码

代码思路：

先给两个input的value赋一个初始值10

通过Object.defineProperty给obj对象的name属性，一个get和一个set方法

get方法是取obj.name属性的时候触发，set方法是给obj.name赋值的时候触发

通过input.value=obj.name，把obj.name的值取出来(被取值)通过等号赋值给input.value

给input绑定输入事件，通过obj.name=this.value把this.value的值通过等号赋值给obj.name,这样可以达到(当input事件触发后，会触发obj.name属性的set方法,set方法里面val参数就相当于触发事件后input.value的值，把值赋值给两个input来达到数据绑定)

注意：

不能同时设置（get和set）wrtable value，同时设置会报错，以下为错误信息

Invalid property descriptor. Cannot both specify accessors and a value or writable attribute

补充:

也可以这样写，效果一样