vue双向数据绑定原理

vue实现双向数据绑定理解，可以简单分为四个过程
　　实现一个监听器Observer：对数据对象进行遍历，包括子属性对象的属性，利用Object.definePropery()对属性都加上setter和getter。这样的话，给这个对象的每个值赋值，就回触发setter，那么就能监听到数据变化。
　　实现一个解析器Compile：解析Vue模板指令，将模板中的变量都替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，调用更新函数进行数据更新。
　　实现一个订阅者Watcher：Watcher订阅者是Observer和Compile之间的通信桥梁，主要的任务是订阅Observer中的属性值变化的消息，当收到属性变化的消息时，触发解析器Compile中对应的更新函数。
　　实现一个订阅器Dep：订阅器采用 发布-订阅 设计模式，用来收集订阅者Watcher，对监听器Observer和订阅者Watcher进行统一管理。

vue实现双向数据绑定是通过Object.defineProperty()方法来实现劫持的
Object.defineProperty(obj,key,options)方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回这个对象;
obj:要修改或定义key值得对象
key:对应obj对象的里面要修改的属性
options:里面有get，set两个函数，用来定义属性值

简单粗暴的双向绑定
<div id="demo"></div>
<input type="text" id="inp" />

let Obj = {} => // 监听对象
let demo = document.getElementById('demo') // 获取DOM
let inp = document.getElementById('inp') // 获取DOM
Object.defineProperty(Obj, 'text', {
configurable: true,
enumerable: true,
set: function (val) {
// 将Obj对象新改变的值赋值给input的value，然后页赋值给demo
inp.value = val
demo.innerHTML = val
console.log('input里面输入了' + val)
},
get: function () {
// 返回对象
return Obj
}
})