谈谈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.