什么是双向数据绑定？
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"> 输入：<span></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事件，修改对象的属性值，即可以实现这样一个简单的数据双向绑定。
3. 实现任务的思路
上面我们只是实现了一个简单的数据双向绑定，而我们真正希望实现的是下面这种方式：
<div> <input type="text" v-model="text"> {{ text }} </div> <script> var vm = new Vue({ el: '#app', data: { text: 'hello world' } }); </script>
即和vue一样的方式来实现数据的双向绑定，那么我们可以把整个实现过程分为下面几步：
输入框以及文本节点与data中的数据绑定
输入框内容变化时，data中的数据同步变化。即view => model的变化。
data中的数据变化 时，文本节点的内容同步变化。即model => view的变化。
4.DocumentFragment
如果希望实现任务，我们还需要使用到DocumentFragment文档片段，可以把它看做一个容器，如下所示：
<div> </div> <script> var flag = document.createDocumentFragment(), span = document.createElement('span'), textNode = document.createTextNode('hello world'); span.appendChild(textNode); flag.appendChild(span); document.querySelector('#app').appendChild(flag) </script>
使用文档片段的好处在于：在文档片段上进行操作DOM，而不会影响到真实的DOM，操作完成后，我们就可以添加到真实的DOM上，这样的效率比直接在正式DOM上修改要高很多。
vue在进行编译时，就是将挂载目标的所有子节点劫持到DocumentFragment中，经过一番处理之后，再将DocumentFragment整体返回插入挂载目标。
5.初始化数据绑定
function compile(node, vm) { var reg = /\{\{(.*)\}\}/ // 如果节点是元素 if (node.nodeType === 1) { var attr = node.attributes for (var i = 0; i < attr.length; i++) { if (attr[i].nodeName === 'v-model') { var name = attr[i].nodeValue node.value = vm.data[name] node.removeAttribute('v-model') } } } if (node.nodeType === 3) { if (reg.test(node.nodeValue)) { var name = RegExp.$1 name = name.trim() node.nodeValue = vm.data[name] } } } function nodeToFragment(node, vm) { var flag = document.createDocumentFragment() var child while(child = node.firstChild) { compile(child, vm) flag.appendChild(child) } return flag } function Vue(options) { this.data = options.data var el = options.el var dom = nodeToFragment(document.querySelector(el), this) document.querySelector(el).appendChild(dom) } var vm = new Vue({ el: '#app', data: { text: 'hello' } })
6.响应式的数据绑定