摘要：并且，由于是在不同的數據上觸發同步，可以精確的將變更發送給綁定的視圖，而不是對所有的數據都執行一次檢測。默認值為表示能否修改屬性的值。

github源碼

Object.defineProperty()方法直接在一個對象上定義一個新屬性，或者修改一個已經存在的屬性， 并返回這個對象。

vueJS采用 ES5 提供的 Object.defineProperty() 方法，監控對數據的操作，從而可以自動觸發數據同步。并且，由于是在不同的數據上觸發同步，可以精確的將變更發送給綁定的視圖，而不是對所有的數據都執行一次檢測。

首先我們得先知道,ECMAScript中有兩種屬性:數據屬性和訪問器屬性（ ie8以下只能在dom對象上使用；不能使用在普通對象上）

數據屬性：

  [[Configurable]]: 表示能否修改屬性。默認值為true

  [[Enumerable]]: 表示屬性是否可枚舉,也就是是否可以通過for-in循環返回屬性。默認值為true

  [[Writable]]: 表示能否修改屬性的值。默認值為true

  [[value]]: 包含這個屬性的值.讀取屬性的時候就是通過這里開始讀。默認值為undefined

訪問器屬性：

   [[Configurable]]: 表示能否修改屬性。默認值為true

   [[Enumerable]]: 表示屬性是否可枚舉,也就是是否可以通過for-in循環返回屬性。默認值為true

   [[Get]]: 在讀取屬性時調用的函數，默認時undefined

   [[Set]]: 在設置屬性時調用的函數，默認時undefined

    我們要是想修改默認屬性的值就可以使用：Object.defineProperty(obj,prop,descriptor);

var a= {}
Object.defineProperty(a,"b",{
    value:123
});
console.log(a.b);//123

 第一個參數obj：目標對象a

 第二個參數prop：需要定義的屬性或方法的名字"b"

 第二個參數descriptor：目標屬性所擁有的特性

    value：屬性的值

    writable：如果為false，屬性的值就不能被重寫,只能為只讀了

    configurable：總開關，一旦為false，就不能再設置他的（value，writable，configurable）

    enumerable：是否能在for...in循環中遍歷出來或在Object.keys中列舉出來。

    get：后面介紹

    set：后面介紹

    注意：在 descriptor 中不能同時設置訪問器（get 和 set）和 wriable 或 value，否則會錯，就是說用 get 和 set，就不能用 writable 或 value 中的任何一個

在基本用法里只設置了value,沒有設置別的，可以簡單的理解為（暫時這樣理解）它會默認幫我們把writable，configurable，enumerable。都設上值，而且值還都是false。（僅限于第一次設置的時候）,等同于以下代碼：

    var a = {}; 
    Object.defineProperty(a, "b", {
         value: 123, 
         writable: false, 
         enumerable: false, 
         configurable: false 
    }); 
    console.log(a.b); //123

總開關，第一次設置 false 之后，，第二次什么設置也不行了：
也就是說,你可以使用Object.defineProperty()方法無限修改同一個屬性,但是當把configurable改為false之后就有限制了

var a = {};
Object.defineProperty(a, "b", { 
    configurable: false
}); 
Object.defineProperty(a, "b",{ 
    configurable: true 
});
//報錯：Uncaught TypeError: Cannot redefine property: b(…) 

var a = {}; 
Object.defineProperty(a, "b", { 
    value: 123,
    writable: false //只讀
});
console.log(a.b); // 打印 123 
a.b = 124; // 沒有錯誤拋出（在嚴格模式下會拋出，即使之前已經有相同的值） 
console.log(a.b); // 打印 123， 賦值不起作用。

var a = {}
    Object.defineProperty(a,"b",{
        value:3445,
        enumerable:true
});
console.log(Object.keys(a));// 打印["b"]

//改成false:

var a = {}
    Object.defineProperty(a,"b",{
        value:3445,
        enumerable:false
});
console.log(Object.keys(a));// 打印[]

訪問器屬性不能直接定義!只能通過Object.defineProperty()來定義：
var a= {}
Object.defineProperty(a,"b",{
    set:function(newValue){
        console.log("賦值是:"+newValue)
    },
    get:function(){
        console.log("取值:")
        return 2 //注意這里，我硬編碼返回2
    }
});
a.b =1; //賦值是: 1
console.log(a.b) ;   //取值  2  

簡單來說，這個 b 賦值或者取值的時候會分別觸發 set 和 get 對應的函數

//判斷是不是對象
function isObj(obj){
    var type = Object.prototype.toString.call(obj);
    return type === "[object Object]";
}
 
//執行函數：
function objFun(obj){
    if(isObj(obj)){
        new Observer(obj);
    }
}

function Observer(obj){
    this.data = obj;
    this.walk(obj);
}

 //監聽事件函數：
Observer.prototype.walk = function(obj){
    for(var k in obj){
        def(obj,k,obj[k])
    }
}

function def(obj,k,val){
    Object.defineProperty(obj,k,{
        configurable:true,
        enumerable:true,
        get:function(){
            console.log("get取值");
            return val;
        },
        set:function(newVal){
            if(val === newVal){
                return;
            }
            val = newVal;
            console.log("set設置值")
        }
    });
}

//測試：
var obj = {a:111,b:222};
objFun(obj);
console.log(obj.a)//get取值 222
obj.a = 333;//set設置值
console.log(obj) 

html:


    Object.defineProperty實現數據和視圖的聯動: 

    
    



js：（視圖控制器）

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
    }
});
//console.log(userInfo)
userInfo.nickName = "我是nickName";
userInfo.introduce = "我是introduce"

上面設置userInfo的nickName屬性時會調用set方法，更新DOM節點的HTML

Vue雙向綁定的實現原理系列（一）：Object.defineproperty
Vue雙向綁定的實現原理系列（二）：設計模式
Vue雙向綁定的實現原理系列（三）：監聽器Observer和訂閱者Watcher
Vue雙向綁定的實現原理系列（四）：補充指令解析器compile