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

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

1. 要绑定的对象
2. 绑定对象操作的值
3. 对应的方法

数据属性

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

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

访问器属性

还有以下两个访问器属性

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

代码

<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