答： vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图。
具体步骤：
第一步：需要observer的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter
这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化
第二步：compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图
第三步：Watcher订阅者是Observer和Compile之间通信的桥梁，主要做的事情是:
1、在自身实例化时往属性订阅器(dep)里面添加自己
2、自身必须有一个update()方法
3、待属性变动dep.notice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调，则功成身退。
第四步：MVVM作为数据绑定的入口，整合Observer、Compile和Watcher三者，通过Observer来监听自己的model数据变化，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据model变更的双向绑定效果。
下面让我们来看代码演示：
一 、先简单的实现一个js的双向数据绑定来熟悉一下Object.defineProperty()方法
<input type="text" id="in"/>
输入的值为：<span id="out"></span>
<script>
var int = document.getElementById('in');
var out = document.getElementById('out');
var obj = {};
Object.defineProperty(obj, 'msg', {
enumerable: true,
configurable: true,
set (newVal) {
out.innerHTML = newVal;
}
})
int.addEventListener('input', function(e) {
obj.msg = e.target.value;
})
</script>
这样我们就能实现js的双向数据绑定,随着文本框输入文字的变化，span中会同步显示相同的文字内容；这样就实现了 model => view 以及 view => model 的双向绑定。
通过给in输入框添加事件监听input来触发obj对象的set方法，而set再修改了访问器属性的同时，也修改了dom样式，改变了span标签内的文本。
二 、实现一个真正的双向绑定的原理
上面的只是简单的使用了Object.defineProperty(),并不是我们最终想要的效果，最终想要的效果如下。
<div id="app">
<input type="text" v-model="text" /> {{text}}
</div>
<script>
var vm = new Vue({
el: 'app',
data: {
text: 'hello'
}
})
</script>
2.任务拆分
拆分任务可以让我们的思路更加清晰：
（1）将vue中的data中的内容绑定到输入文本框和文本节点中
（2）当文本框的内容改变时，vue实例中的data也同时发生改变
（3）当data中的内容发生改变时，输入框及文本节点的内容也发生变化
3.开始任务1——绑定内容
我们先了解一下 DocuemntFragment（碎片化文档）这个概念，你可以把他认为一个dom节点收容器，当你创造了10个节点，当每个节点都插入到文档当中都会引发一次浏览器的回流，也就是说浏览器要回流10次，十分消耗资源。
而使用碎片化文档，也就是说我把10个节点都先放入到一个容器当中，最后我再把容器直接插入到文档就可以了！浏览器只回流了1次。
注意：还有一个很重要的特性是，如果使用appendChid方法将原dom树中的节点添加到DocumentFragment中时，会删除原来的节点。
