谈谈vue双向数据绑定问题

　　vue是MVVM模型，vueObserver 数据监听器，把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项，Vue 将遍历此对象所有的属性，并使用Object.defineProperty()方法把这些属性全部转成setter、getter方法。当data中的某个属性被访问时，则会调用getter方法，当data中的属性被改变时，则会调用setter方法。

视图和数据变化绑定原理
 
对于一个html页面
 
<div>
 
    <p>你好，<span id='nickName'></span></p>
 
    <div id="introduce"></div>
 
</div>　　　　
 
设置一个数据的属性的getter和setter
 
//视图控制器
 
var userInfo = {};
 
Object.defineProperty(userInfo, "nickName", {
 
    get: function(){
 
        return document.getElementById('nickName').innerHTML;
 
    },
 
    set: function(nick){
 
        document.getElementById('nickName').innerHTML = nick;
 
    }
 
});

vue.js的数据变动原理

但是，这个例子只是数据和dom节点的绑定，而vue.js更为复杂一点，它在网页dom和accessor之间会有两层，一层是Wacher，一层是Directive，比如以下代码。

var a = { b: 1 }

var vm = new Vue({

data: data

})

把一个普通对象（a={b:1}）传给 Vue 实例作为它的 data 选项，Vue.js 将遍历它的属性，用Object.defineProperty 将它们转为 getter/setter,如图绿色的部分所示。

每次用户更改data里的数据的时候，比如a.b =1，setter就会重新通知Watcher进行变动，Watcher再通知Directive对dom节点进行更改。

看这个图就可以知道watcher就是个中介，负责收集依赖以及setter通知它更新页面dom.