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）