一、原理
如果使用Object.defineProperty,实现一个最简单的双向绑定其实很简单，只需如下：
上面这个demo就是vue双向绑定最简化的原理。
二、替换元素
想想我们使用vue时的规则
写上页面结构：
我们把Vue抽象为一个构造函数，传入这些值
替换掉节点中所有的双中括号里的内容:
这样就可以成功替换掉双中括号的内容：
三、绑定元素
上面我们只是替换了元素，但还没有实现绑定
实现数据绑定，就要用到definedProperty的set和get方法：
首先我们要给vue的所有属性都添加set和get方法：
再来明确我们要做的事，获取输入的值，改变Vue中相应的data的值，同时改变‘双中括号’中的值；
我们已经给data的每个属性都添加了get和set的方法，现在要做的就是如何触发它们。
触发它肯定是在赋值的时候，所以我们在有v-model属性的节点监听输入事件，同时赋值，触发set事件：
我们监听了input事件，接下来要获取输入的值并同步改变文本；
我们肯定希望只希望哪里改变了就对哪里做处理就行了，所以我们引入一个简单的发布——订阅组件：
在添加set和get的同时订阅事件：
添加一个方法，来在pubsub发出通知时处理事件，我们命名为watcher
这个watcher我们在什么时候添加呢？当然是在一开始的时候（compile里）：
至此，便模拟了整个数据绑定的流程。
四、总结
最后理清整个过程的思路
创建Vue：
input事件:
源码在我的github仓库：https://github.com/lastnigtic/vue-bindData
原文:大专栏 模拟Vue 中数据双向绑定