vue双向数据绑定的原理
来源:互联网 发布:淘宝全民抢拍 编辑:程序博客网 时间:2024/04/24 07:08
有关双向数据绑定的原理
最近两次面试的时候,被问到了vue中双向数据绑定的原理,因为初学不精,只是使用而没有深入研究,所以答不出来。之后就在网上查找了别人写的博客,学习一下。
下面是博客园一篇博客,以及MDN上讲解Object.defineProperty()方法的地址。
文章链接:vue的双向绑定原理及实现
Mozilla 开发者服务:Object.defineProperty()
因为内容比较长,就不转载了,只贴个连接在这里,有兴趣的可以直接点击链接访问。
这里简单说一下个人的理解。
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; // 1obj.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()方法改变数据存取的默认行为来实现的。
- vue双向数据绑定的原理解密
- vue双向数据绑定的原理
- vue双向数据绑定原理
- Vue 双向数据绑定原理
- Vue实现双向绑定的原理以及响应式数据
- 【学习笔记】Vue中实现双向数据绑定的原理
- vue中数据双向绑定的实现原理
- Vue双向数据绑定原理分析
- Vue.js双向数据绑定原理
- vue实现数据双向绑定原理剖析
- Vue双向数据绑定原理解析
- vue.js双向数据绑定实现原理
- vue双向绑定原理
- vue开发:vue,angular,react数据双向绑定原理分析
- Vue.js双向绑定的实现原理
- 转-Vue双向绑定的原理
- Vue.js双向绑定的实现原理
- Vue的双向绑定原理及实现
- 2014-2015 Northwestern European Regional Contest (NWERC 2014)【solved:7 / 11】
- vue 父子组件通讯--props,refs(muse-ui,vue.js2.0)
- Flask01 初识flask、创建flask应用、flask启动配置
- Android控件之ListView详解及实现分页效果
- HDU
- vue双向数据绑定的原理
- idea创建maven,spring,springmvc,mybatis,项目(二)
- 欢迎使用CSDN-markdown编辑器
- php生成验证码
- logcat
- 剑指offer——33.丑数
- drawable与bitmap的转换,以及如何将一个view生成一个bitmap
- UVA 1339
- Halcon及license文件下载网址及安装步骤