【JavaScript】实现数据的双向绑定

数据的双向绑定

双向绑定指的是视图和数据两个之间双向绑定！

在页面中绑定两个或者多个元素，比如一个input框和一个p标签，当在input框输入值时，p标签也会自动更新文本。只关注数据的操作，减少对DOM的操作。

一、直接赋值

也就是将input框的值赋值给p标签的文本

html代码块

js代码块

也能够实现当input框的值发生改变时，p标签的文本也可以及时主动更新

二、访问器监听 Object.defineProperty方法

访问器监听的实现，主要采用了javascript中原生方法：Object.defineProperty，该方法可以为某对象添加访问器属性，当获取或者给该对象属性赋值的时候，会触发访问器属性

注意：1.Object.defineProperty方法只能用于对象，所有使用该方法时，必须创建对象。

2.当你访问或者获取该对象的属性时，会立马触发访问器属性getter，从而去获取该属性的值

3.当你设置该对象的属性时，会立马触发访问器属性setter，设置该属性的值，setter更改的是视图（DOM）！setter必须要传参！

html代码块

js代码块