简单实现 Vue 的双向数据绑定

Vue 的双向数据绑定的核心是Object.defineProperty(),通过这个方法来劫持各个属性的setter，getter，在数据变动时同时改变绑定这个数据的元素的值。这个方法有三个参数。

要绑定的对象
绑定对象操作的值
对应的方法

数据属性

在第三个参数内，可以设置以下几个数据属性

Configurable: 表示能否通过delete将属性删除，能否把属性修改为访问器属性, 默认为false。当把属性Configurable设置为false后，该属性不能通过 delete 删除，并且也无法再将该属性的Configurable设置回true
Enumerable: 表示属性可否被枚举(即是否可以通过for in循环返回)，默认false
Writable: 表示属性是否可写(即是否可以修改属性的值)，默认false
Value: 该属性的数据值, 默认是undefined

访问器属性

还有以下两个访问器属性

Get: 读取属性时调用的函数, 默认为undefined
Set: 写入属性时调用的函数, 默认是undefined

代码

html

<input id="txt" type="text" autocomplete="off" />
<p id="p"></p>

const oTxt = document.querySelector('#txt')
const oP = document.querySelector('#p')
var data = {}
Object.defineProperty(data, 'val', {
  configurable: true,
  enumerable: true,
  get() {},
  set(val) {
    // 在每次设置data中的val属性时,都改变p标签和文本框的值
    oTxt.value = val
    oP.innerHTML = val
  },
})
oTxt.addEventListener('input', function (event) {
  // 每次输入值的时候就把值传给data中的val属性
  data.val = event.target.value
})

最后

这只是简单的实现了双向数据绑定，Vue 的绑定更复杂些，以后再写啦~

简单实现 Vue 的双向数据绑定 ​

数据属性 ​

访问器属性 ​

代码 ​

最后 ​

简单实现 Vue 的双向数据绑定

数据属性

访问器属性

代码

最后