Vue作为目前最火的框架之一，对于它的双向数据绑定原理很多人都会有些疑惑，今天在这边，我用比较浅显、易理解的小例子来给大家的简单的讲解一下。
vue数据双向绑定原理
先来看一下数据双向绑定的一个效果来初步感受一下它的神奇之处。
<body>
<div id="app">
<input type="text" v-model="msg">
<!-- v-model属于表单输入的一个指令，实质是一个属性，属性值是一个变量 -->
{{ msg }}
<!-- 数据绑定最常见的形式-Mustache语法的文本差值，{{}}将会被替换成对应数据对象上msg的值 -->
</div>
</body>
<script src="vue.js"></script>
<script >
new Vue({
el:"#app", //找到要使用Vue语法的DOM节点
data:{ //初始化的数据
msg:"hello vue" //定义了msg的值
}
})
</script>
整体效果参考下图（此图不是上述代码效果）
下面探讨一下原理。
vue数据双向绑定是通过 数据劫持 结合 发布者-订阅者模式 的方式来实现的.
首先来看一下数据劫持-数据劫持的实现方式 Object.defineProperty()。
Object.defineProperty()
Object.defineProperty()方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并且返回这个对象。
语法 Object.defineProperty(obj,prop,descriptor)
obj:要在其上定义属性的对象
prop：要定义或者修改的属性的名称
descriptor：将被定义或修改的属性描述符
返回值：被传递给函数的对象
如果上述解释仍然不明白，下面我们看下Object.defineProperty()方法的具体使用案例
<script>
var Book = {name:"java权威指南"};
console.log(Book.name);
let val;
Object.defineProperty(Book,"name",{
set(value){
val=value;
},
get(){
console.log(val); //打印这里的值可以看出，val被修改了。
return val; //这里就是返回值
}
})
console.log(Book);
Book.name="HTML5权威指南"; //这里调用了set方法，这里实际上将“html5权威指南作为参数value”传入了set方法并赋值给了val；
console.log(Book.name); //这里调用了get方法，获取了修改后的val的值
</script>
运行结果如上：最终Book对象上的name属性通过get，set方法就成功的进行了修改。看到第22行的输出结果也可以看出，val的值被修改传递。
查看Book对象也会发现上面绑定了get和set方法。
利用Object.defineProperty()的这个特点，当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter。
我们可以先来看一下通过控制台输出一个定义在vue初始化数据上的对象是个什么东西。是否这个vue对象如上述所说拥有get和set方法。
<script src="vue.js"></script>
<script>
var vm=new Vue({
data:{
obj:{
a:1
}
},
created: function () {
console.log(this.obj);
}
})
</script>
我们可以看到属性a有两个相对应的get和set方法，为什么会多出这两个方法呢？因为vue是通过上述讲的Object.defineProperty()来实现数据劫持的。
发布-订阅者模式
又叫观察者模式，它定义了一对多的关系，让多个观察者可以同时监听一个对象。
它的最主要的思想：这个对象状态变化时就会通过所有的观察者对象，使得它们能够自动更新。
最上面的双向绑定案例的思想简单分析：
vue内部通过Object.defineProperty( )对属性设置一个set函数，当input中输入的值发生了改变了就会来触发这个函数，然后得到新的msg的值通过{{}}将新得到的msg值反应到页面上。
最基础的理解就在上方，如果还要更深层次的理解还要对原理图去理解，下面我会放一张原理图，大家如果学有余力可以再去学习哦~
