VUE双向数据绑定原理
程序员文章站
2023-01-13 15:29:02
vue双向数据绑定原理
vue实现双向数据绑定的原理就是利用了 object.defineproperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的。
在m...
vue双向数据绑定原理
vue实现双向数据绑定的原理就是利用了 object.defineproperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的。
在mdn上对该方法的说明是:object.defineproperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象。
它接收三个参数,要操作的对象,要定义或修改的对象属性名,属性描述符。重点就是最后的属性描述符。
属性描述符是一个对象,主要有两种形式:数据描述符和存取描述符。这两种对象只能选择一种使用,不能混合两种描述符的属性同时使用。上面说的get和set就是属于存取描述符对象的属性。
然后我们可以通过在存取描述符中的get和set方法内写入自定义的逻辑来实现对象获取属性和设置属性时的行为。
var keyvalue = 1; var obj = {}; object.defineproperty(obj,'key', { enumerable: true, configurable: true, get: function(){ return keyvalue; }, set: function(newvalue){ keyvalue = newvalue; console.log(`keyvalue的值已发生改变,目前的值是:${keyvalue}`); } }); obj.key; // 1 obj.key = 'obj对象的key属性已经绑定了变量keyvalue的值'; // keyvalue的值已发生改变,目前的值是:obj对象的key属性已经绑定了变量keyvalue的值 // "obj对象的key属性已经绑定了变量keyvalue的值" keyvalue; // "obj对象的key属性已经绑定了变量keyvalue的值" 上面这个例子就是改变了对象获取属性及设置属性的默认行为。
对象obj获取属性key的值时,会触发上面的get方法,得到的是变量keyvalue的值,然后当重新设置key的值时,触发set方法,会将变量keyvalue的值改变为设置的值,如此就实现了一个简单的双向绑定:改变keyvalue,obj.key得到的值也会改变,重新设置obj.key,keyvalue一样会随之改变。
当然,vue的双向绑定实际更复杂,但最基本的原理就是基于object.defineproperty()方法改变数据存取的默认行为来实现的。
上一篇: JS中数组的使用方法解析
下一篇: ES6之Promise对象介绍