vue.js 2.0版的雙向數據綁定就是通過Object.defineProperty方法實現的，俗稱屬性攔截器。
這么說吧，vue.js是通過它實現雙向綁定的。俗稱屬性攔截器。而且專門用來監控對象屬性變化的Object.observe方法也被草案發起人撤回了(此方法在node環境中仍能使用)。可見defineProperty的威力之大。
Object.defineProperty() 不支持ie8
方法會直接在一個對象上定義一個新屬性，或者修改一個已經存在的屬性， 并返回這個對象。
// 語法: /* * Object.defineProperty(obj,prop,descriptor) * @param: obj:需要定義屬性的對象; * prop:需要定義或修改的屬性； * descriptor:將被定義或修改屬性的描述符{} * 返回值 : 返回傳入函數的對象，即第一個參數obj */對象里目前存在的屬性描述符主要有兩種形式： 數據描述符和存取描述符.
數據描述符： 擁有可寫或不可寫值的屬性*
可選鍵值：
configurable: 當且僅當configurable為true時，改屬性描述符才能夠被改變，也能被刪除
enumerable: 當其值為true時，該屬性才能夠出現在對象的枚舉屬性中，默認為false
writable: 當且僅當該屬性的值為true時，該屬性才能被賦值運算符改變， 默認為false。
value： 該屬性對應的值，可以是任意有效的javascript的值（數值，對象，函數等），默認為undefined
存取描述符： 由一對getter-setter函數功能來描述的屬性*
可選鍵值：
configurable: 當且僅當configurable為true時，改屬性描述符才能夠被改變，也能被刪除
enumerable: 當其值為true時，該屬性才能夠出現在對象的枚舉屬性中，默認為false
get: 給屬性提供getter的方法，如果沒有 getter 則為undefined。當我們讀取某個屬性的時候，其實是在對象內部調用了該 方法，此方法必須要有return語句。該方法返回值被用作屬性值。默認為 undefined
set：設置屬性值的方法， 如果沒有 setter 則為 undefined。該方法將接受唯一參數，并將該參數的新值分配給該屬性。默認為 undefined。也就是說，當我們設置某個屬性的時候，實際上是在對象的內部調用了該方法
note：兩者不能同時定義， 否則報錯==
get和set是我們今天要重點討論的兩個方法，先看一下他們的簡單實例：
實例：
var a = {}; Object.defineProperty(a, 'b', { set: function(newValue) { console.log('賦值操作, 賦值' + newValue); }, get: function() { console.log('取值操作'); return 2; //這里需注意 我硬讓他返回2 } }); a.b = 1; // 賦值操作，賦值1 a.b; // 取值操作2雖然我將a.b的值設置成了1，但是因為我在get方法中始終返回了2，所以a.b的值一直是2。
那么，這就好玩兒了：我們可以在頁面監聽某個變量，當變量發生變化的時候，我們就更新對應的視圖。由數據來驅動視圖的更新，是不是很熟悉？是的，vue .js的核心思想就是這個。我們寫個小例子：
<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <title>defineProperty</title> </head> <body> <div id="test">這是一個測試</div> <script> var view = document.getElementById("test"); var data = {}; var i = 0; Object.defineProperty(data, "b", { set: function(newValue) { //當data.b的值改變的時候更新＃test的視圖 view.textContent = newValue; }, get: function() {} }); setInterval(function() { i++; data["b"] = "data.b的值更新了，我要更新視圖" + i; }, 2000); </script> </body></html>視圖的變化過程：
最開始的視圖：
2秒后的視圖：
重點理解：
// 3.Object.defineProperty(obj,propertyName,{}):給對象添加屬性(指定描述符) const obj = { firstName: 'A', lastName: 'B', } // 給obj添加fullName屬性 // obj.fullName = 'A-B' /* 1.數據描述符 configurable: 是否可以重新定義 enumerable: 是否可以枚舉 value: 初始值 writable: 是否可以修改屬性值 2.訪問描述符 get: 回調函數，根據其它相關的屬性動態計算得到當前屬性值 set: 回調函數，監視當前屬性值的變化，更新其它相關的屬性值 */ Object.defineProperty(obj,'fullName',{ get() { return this.firstName+'-'+this.lastName; }, set(value) { const names = value.split('-'); this.firstName = names[0]; this.lastName = names[1]; } }) console.log(obj.fullName);//A-B obj.firstName = 'C'; obj.lastName = 'D'; console.log(obj.fullName);//C-D obj.fullName = 'E-F'; console.log(obj.firstName,obj.lastName);//E FObject對象有一個freeze的方法，用于實現對象屬性和方法的不可更改
// 使用方法：const arr = [1,2,3,4];Object.freeze(arr); // 變量arr不可更改arr.push(5); // 報錯：不能添加屬性
Object.definePropperty也可以實現規定變量的不可更改
const obj = { key: 'chris', vlaue: 'person' }; Object.defineProperty(obj, 'key', { configurable: false, // 不可刪除 writable: false, // 不可寫 });})若有不足請多多指教！希望給您帶來幫助！
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，謝謝大家對武林網的支持。如果你想了解更多相關內容請查看下面相關鏈接
新聞熱點
疑難解答
