摘要：并且，由于是在不同的數(shù)據(jù)上觸發(fā)同步，可以精確的將變更發(fā)送給綁定的視圖，而不是對(duì)所有的數(shù)據(jù)都執(zhí)行一次檢測(cè)。默認(rèn)值為表示能否修改屬性的值。

github源碼

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

vueJS采用 ES5 提供的 Object.defineProperty() 方法，監(jiān)控對(duì)數(shù)據(jù)的操作，從而可以自動(dòng)觸發(fā)數(shù)據(jù)同步。并且，由于是在不同的數(shù)據(jù)上觸發(fā)同步，可以精確的將變更發(fā)送給綁定的視圖，而不是對(duì)所有的數(shù)據(jù)都執(zhí)行一次檢測(cè)。

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

數(shù)據(jù)屬性：

  [[Configurable]]: 表示能否修改屬性。默認(rèn)值為true

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

  [[Writable]]: 表示能否修改屬性的值。默認(rèn)值為true

  [[value]]: 包含這個(gè)屬性的值.讀取屬性的時(shí)候就是通過這里開始讀。默認(rèn)值為undefined

訪問器屬性：

   [[Configurable]]: 表示能否修改屬性。默認(rèn)值為true

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

   [[Get]]: 在讀取屬性時(shí)調(diào)用的函數(shù)，默認(rèn)時(shí)undefined

   [[Set]]: 在設(shè)置屬性時(shí)調(diào)用的函數(shù)，默認(rèn)時(shí)undefined

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

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

 第一個(gè)參數(shù)obj：目標(biāo)對(duì)象a

 第二個(gè)參數(shù)prop：需要定義的屬性或方法的名字"b"

 第二個(gè)參數(shù)descriptor：目標(biāo)屬性所擁有的特性

    value：屬性的值

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

    configurable：總開關(guān)，一旦為false，就不能再設(shè)置他的（value，writable，configurable）

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

    get：后面介紹

    set：后面介紹

    注意：在 descriptor 中不能同時(shí)設(shè)置訪問器（get 和 set）和 wriable 或 value，否則會(huì)錯(cuò)，就是說用 get 和 set，就不能用 writable 或 value 中的任何一個(gè)

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

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

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

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

var a = {}; 
Object.defineProperty(a, "b", { 
    value: 123,
    writable: false //只讀
});
console.log(a.b); // 打印 123 
a.b = 124; // 沒有錯(cuò)誤拋出（在嚴(yán)格模式下會(huì)拋出，即使之前已經(jīng)有相同的值） 
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  

簡(jiǎn)單來說，這個(gè) b 賦值或者取值的時(shí)候會(huì)分別觸發(fā) set 和 get 對(duì)應(yīng)的函數(shù)

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

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

 //監(jiān)聽事件函數(shù)：
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設(shè)置值")
        }
    });
}

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

html:


    Object.defineProperty實(shí)現(xiàn)數(shù)據(jù)和視圖的聯(lián)動(dòng): 

    
    



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"

上面設(shè)置userInfo的nickName屬性時(shí)會(huì)調(diào)用set方法，更新DOM節(jié)點(diǎn)的HTML

Vue雙向綁定的實(shí)現(xiàn)原理系列（一）：Object.defineproperty
Vue雙向綁定的實(shí)現(xiàn)原理系列（二）：設(shè)計(jì)模式
Vue雙向綁定的實(shí)現(xiàn)原理系列（三）：監(jiān)聽器Observer和訂閱者Watcher
Vue雙向綁定的實(shí)現(xiàn)原理系列（四）：補(bǔ)充指令解析器compile