很多同学在开发过程中都会遇到双向数据绑定的知识点，那么什么是双向数据绑定呢？今天传智播客上海校区赵老师就带领大家来学习关于双向数据绑定。
vue是一个mvvm框架，即数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化，这也算是vue的精髓之处了。传智播客上海校区赵老师提醒大家值得注意的是，我们所说的数据双向绑定，一定是对于UI控件来说的，非UI控件不会涉及到数据双向绑定。
对此，传智播客上海校区赵老师给大家总结出了以下两点：
一、访问器属性
在实现双向数据绑定之前，我们必须要理解访问器属性Object.defineProperty()这个概念：
Object.defineProperty()函数可以定义对象的属性相关描述符， 其中的set和get函数对于完成数据双向绑定起到了至关重要的作用，下面，传智播客上海校区赵老师将带领大家学习下这个函数的基本使用方式。
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 | var obj = { foo: 'foo' }
Object.defineProperty(obj, 'foo', { get: function () { console.log('将要读取obj.foo属性'); }, set: function (newVal) { console.log('当前值为', newVal); } });
obj.foo; // 将要读取obj.foo属性 obj.foo = 'name'; // 当前值为 name |
可以看到，get即为我们访问属性时调用，set为我们设置属性值时调用。
二、简单的数据双向绑定实现方法
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>forvue</title> </head> <body> <input type="text" id="textInput"> 输入：<span id="textSpan"></span> <script> var obj = {}, textInput = document.querySelector('#textInput'), textSpan = document.querySelector('#textSpan');
Object.defineProperty(obj, 'foo', { set: function (newValue) { textInput.value = newValue; textSpan.innerHTML = newValue; } });
textInput.addEventListener('keyup', function (e) { obj.foo = e.target.value; });
</script> </body> </html> |
在浏览器中测试，发现实现了双向绑定的功能： 使用Object.defineProperty()来定义属性的set函数，属性被赋值的时候，修改Input的value值以及span中的innerHTML；然后监听input的keyup事件，修改对象的属性值。即可实现这样的一个简单的数据双向绑定。
以上就是传智播客上海校区赵老师为大家分享的关于双向数据绑定的知识点解析，希望大家在工作中能灵活运用，并在工作中不断进步和提高。
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
