vue的双向数据绑定原理

原理、

vue是采用数据劫持结合发布者-订阅者模式的方式， 通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调，我们先来看看object.defineProperty()这个方法

var obj  = {};
Object.defineProperty(obj, 'name', {
        get: function() {
            console.log('我被获取了')
            return val;
        },
        set: function (newVal) {
            console.log('我被设置了')
        }
})
obj.name = 'fei';//在给obj设置name属性的时候，触发了set这个方法
var val = obj.name;//在得到obj的name属性，会触发get方法

vue是通过数据劫持来做数据绑定，其中最核心的方法是通过object.defineProperty()来实现对属性的劫持，那么在设置或者获取的时候我们使用set或者get方法里触发其他的函数，达到监听数据变动的目的

先看原理图：

observer用来实现对每个vue中的data中定义的属性循环用Object，defineProperty()实现数据劫持，以便利用其中的setter和getter，然后通知订阅者，订阅者会触发它的update方法，对师徒进行更新

在vue中v-model，v-name，{{}}等都可以对数据进行显示，也就是说假如一个属性都通过这三个指令了，那么每当这个属性改变时候，相应的这个三个指令的HTML视图也必须改变，于是vue中就是每当有这样的可能用到双向绑定的指令，就在一个Dep中增加一个订阅者，其订阅者只是更新自己的指令对应的数据，也就是v-model='name'和{{name}}有两个对应的订阅者，各自管理自己的地方。每当属性的set方法触发，就循环更新Dep中的订阅者。

双向数据绑定给人的最大的优越感就是方便。当数据data发生变化时，页面自动发生更新。但是有一个缺点也是因为自动更新而导致的，因为这样你就不知道data什么时候变了，也不知道是谁变了，变化后也不会通知你，当然你可以watch来监听data的变化，但是这变复杂了，还不如单向数据绑定