vue双向绑定原理分析
当使用vue的时候，其双向绑定为我们开发带来了诸多便捷，今天我们就来分析一下vue双向绑定的原理
.vue双向绑定原理
vue.js 则是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。我们先来看Object.defineProperty()这个方法：
demo:
vue.js 则是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。我们先来看Object.defineProperty()这个方法：
实现最简单的双向绑定
`
我们知道通过Object.defineProperty()可以实现数据劫持，是的属性在赋值的时候触发set方法，
demo1:
var obj = {};
Object.defineProperty(obj, 'name', {
get: function() {
console.log('我被获取了')
return val;
},
set: function (newVal) {
console.log('我被设置了')
}
})
demo2:
```var Book = { name: 'HTML5从入门到放弃' }; // 默认情况下name 会有两个方法 get set
console.log(Book.name) // HTML5从入门到放弃 --- 调用了get
// Book.name = "《" + Book.name + "》"; // 相当于调用了set
// console.log(Book.name) // 《HTML5从入门到放弃》
var val = ""; //
Object.defineProperty(Book, 'name', {
set (value) { // 劫持了name的set方法，处理数据
// val = value;
val = '《' + value + '》';
},
get () {
return val;
}
})
Book.name = "JS从入门到放弃";
console.log(Book.name)
obj.name = 'fei';//在给obj设置name属性的时候，触发了set这个方法
var val = obj.name;//在得到obj的name属性，会触发get方法
已经了解到vue是通过数据劫持的方式来做数据绑定的，其中最核心的方法便是通过Object.defineProperty()来实现对属性的劫持，那么在设置或者获取的时候我们就可以在get或者set方法里假如其他的触发函数，达到监听数据变动的目的，无疑这个方法是本文中最重要、最基础的内容之一。
## 实现最简单的双向绑定
` 我们知道通过Object.defineProperty()可以实现数据劫持，是的属性在赋值的时候触发set方法，
`
<!doctype html>
Watcher.prototype = {
update: function() {
this.get();
this.node[this.type] = this.value; // 订阅者执行相应操作
},
// 获取data的属性值
get: function() {
console.log(1)
this.value = this.vm[this.name]; //触发相应属性的get
}
}
### 实现Dep来为每个属性添加订阅者
function Dep() {
this.subs = [];
}
Dep.prototype = {
addSub: function(sub) {
this.subs.push(sub);
},
notify: function() {
this.subs.forEach(function(sub) {
sub.update();
})
}
}