原理

vue双向数据绑定是通过数据劫持结合发布订阅模式的方式来实现的，也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变
核心：关于VUE双向数据绑定，其核心是Object.defineProperty()方法；

介绍一下Object.defineProperty()方法

（1）Object.defineProperty(obj, prop, descriptor) ，这个语法内有三个参数，分别为obj（要定义其上属性的对象）prop（要定义或修改的属性） descriptor（具体的改变方法）
（2）简单地说，就是用这个方法来定义一个值。当调用时我们使用了它里面的get方法，当我们给这个属性赋值时，又用到了它里面的set方法；

var obj = {};
Object.defineProperty(obj,"hello",{
	get:function(){
	   console.log("小佑调用了get方法"）
	},
	set:function(){
	   console.log("小佑调用了set方法!")
	}
})；
obj.hello; // 调用了get里面的方法
obj.hello = "hi" // 调用了set里面的方法

MVVM

Model

1.现实世界中对事物的抽象结果，就是建模。
2.我们可以把Model称为数据层，因为它仅仅关注数据本身，不关心任何行为

View

1.用户操作界面
2.当ViewModel对Model进行更新的时候，会通过数据绑定更新到View

ViewModel

1.业务逻辑层，View需要什么数据，ViewModel要提供这个数据；View有某些操作，ViewModel就要响应这些操作，所以可以说它是Model for View.
2.MVVM模式的重点就在View和ViewModel的交互，View和ViewModel有两种交互方式

实现Vue双向绑定

1.模板的编译Compile

这个 {} 是模板，它要先取到数据data.message，然后要编译成我们想要的数据格式。

<div id="app">
    <input type="text" v-model="message">
    {{ message}}
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    let vm = new Vue({
        el:'#app',
        data:{
            message:'Hello I am Yimi'
        }
    });
</script>

2.数据劫持Observer

在Vue中主要通过ES5提供的 Object.defineProperty( ) 方法来劫持（监控）各属性变化，即给所有的对象上的某一些数据都加上get、set方法。

3.观察者Watcher

数据变化了，就要告诉视图重新编译模板，那么编译模板和数据劫持之间就需要一个关联，那就是Watcher。而Compile和Observer的具体通信靠的就是订阅者Dep，后文代码实现的时候再仔细讨论Dep。
我们可以通过Vue来实现双向数据绑定，但是现在不想通过Vue，而想自己来实现这个MVVM，首先简单画了一下实现MVVM框架的需要的模块和流程：

本文是小佑通过网上各大博客搜集并且加上自己的理解变成让读者更容易理解的教程~ 好了就到这里拜拜ヾ(•ω•`)o...

目录CONTENT

Vue双向绑定原理

原理