vuejs的双向数据绑定实现原理——object.defineproperty()

视图和数据变化绑定

而vue.js主要利用了accessor descriptors的set和get来更新视图，这里看到的这个例子挺好，是一个简单的绑定。
对于一个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;
    }
});
Object.defineProperty(userInfo, "introduce", {
    get: function(){
        return document.getElementById('introduce').innerHTML;
    },
    set: function(introduce){
        document.getElementById('introduce').innerHTML = introduce;
    }
})

 而后就能愉快地绑定数据交互了。

userInfo.nickName = "xxx";
userInfo.introduce = "我是xxx，我来自云南，..."

 

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节点进行更改。

 

 

 （原文地址：http://www.jianshu.com/p/07ba2b0c8fca）