本文实例讲述了vue中的双向数据绑定原理与常见操作技巧。分享给大家供大家参考，具体如下：
什么是双向数据绑定？
vue是一个mvvm框架，即数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。这也是算是vue的精髓之处了。值得注意的是，我们所说的数据双向绑定，一定是对于UI控件来说的，非UI控件不会涉及到数据双向绑定。单向数据绑定是使用状态管理工具的前提，如果我们使用vuex，那么数据流也是单向的，这时就会和双向数据绑定有冲突，我们可以这么解决。
为什么要实现数据的双向绑定？
在vue中，如果使用vuex，实际上数据还是单向的，之所以说是数据双向绑定，这是用的UI控件来说，对于我们处理表单，vue的双向数据绑定用起来就特别舒服了。即两者并不互斥，在全局性数据流使用单项，方便跟踪，局部性数据流使用双向，简单易操作。
1.访问器属性
Object.defineProperty()函数可以定义对象的属性相关描述符，其中的set和get函数对于完成数据双向绑定起到了至关重要的作用，下面，我们看看这个函数的基本使用方式。
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为我们设置属性值时调用。
2.简单的数据双向绑定实现方法
<!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事件，修改对象的属性值，即可以实现这样一个简单的数据双向绑定。
