vue数据双向绑定原理
思路：
1.劫持并监听所有数据属性
2.数据发生更新变化时通知
3.订阅者（多个订阅者需要存到Dep订阅器里）
4.实现一个指令解析器
5.指令解析器根据指令模板替换数据，绑定相应的更新函数
6.订阅者收到属性变化的通知，并执行绑定的解析器解析的回调函数
7.从而更新视图view
Object.defineProperty()
此方法在一个对象上定义一个新属性，或者修改一个对象的现有属性，并烦恼会这个对象
语法：
Object.defineProperty(obj, prop, descriptor)
Object.defineProperty(
属性所在对象
属性的名字
描述符对象==get 和set 方法
)
返回值，被传递给函数的对象
为对象定义多个属性的话, 就用函数的复数写法:Object.defineProperties();
function myclass() {
}
var value;
Object.defineProperty(myclass.prototype, "x", {
get() {
return value;
},
set(x) {
value = x;
}
});
var a = new myclass();
var b = new myclass();
a.x = 1;
console.log(b.x); // 1
set（）
setter
当尝试设置属性时，set语法将对象属性绑定到要调用的函数
语法：
{set prop(val) { . . . }}
{set 要绑定到给定函数的属性名(保存分配给prop的值的变量的一个别名) { . . . }}
这里是引用
采用数据劫持结合发布者-订阅者模式的方式
通过Object.defineProperty()来劫持各个属性的setter，getter
在数据变动时发布消息给订阅者
触发相应的监听回调1、数据监听器Observer
对数据对象所有属性进行监听，变化时拿到最新值并通知订阅者
利用Obeject.defineProperty()来监听属性变动
a.对需要监听的数据对象进行递归遍历（递归：函数里再调用自身函数），包括子属性对象的属性，都加上 setter和getter，这样给这个对象赋值，就会触发setter，就可以监听到数据变化
b.监听到数据变化之后，需要一个消息订阅器，用来收集订阅者，订阅者添加进dep
2、指令解析器Compile
对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数
3、实现一个Watcher
连接Observer和Compile的桥梁，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数，从而更新视图
总结
通过Observer监听model数据变化
通过Compile解析编译模板指令
利用Watcher创建Observer和Compile之间的通信桥梁
实现：
数据变化 -> 视图更新；
视图交互变化(input) -> 数据变更 的 双向绑定效果
vue数据双向绑定的体现
vue数据双向绑定是通过 数据劫持 结合 发布者-订阅者模式 的方式来实现的
数据劫持的实现方式 Object.defineProperty()
当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter。
{{ msg }}
<div id="app">
<p>v-model属于vue中表单数输入的一个指令，实质是一个属性，属性的值
是一个变量 msg</p>
<input type="text" v-model="msg"/>
{{ msg }}
</div>
<script src="vue.js"></script>
<script>
const app = new Vue({
el: '#app', // 找到那个DOM节点内要使用vue语法
data: { // 初始化的数据
msg: 'hello vue'
}
})
</script>
