vue.js的雙向數(shù)據(jù)綁定Object.defineProperty方法的神奇之處
vue.js 2.0版的雙向數(shù)據(jù)綁定就是通過Object.defineProperty方法實(shí)現(xiàn)的，俗稱屬性攔截器。
這么說吧，vue.js是通過它實(shí)現(xiàn)雙向綁定的。俗稱屬性攔截器。而且專門用來監(jiān)控對象屬性變化的Object.observe方法也被草案發(fā)起人撤回了(此方法在node環(huán)境中仍能使用)?？梢奷efineProperty的威力之大。
Object.defineProperty() 不支持ie8
方法會直接在一個對象上定義一個新屬性，或者修改一個已經(jīng)存在的屬性， 并返回這個對象。
// 語法:
/*
* Object.defineProperty(obj,prop,descriptor)
* @param: obj:需要定義屬性的對象;
* prop:需要定義或修改的屬性；
* descriptor:將被定義或修改屬性的描述符{}
* 返回值 : 返回傳入函數(shù)的對象，即第一個參數(shù)obj
*/
對象里目前存在的屬性描述符主要有兩種形式： 數(shù)據(jù)描述符和存取描述符.
數(shù)據(jù)描述符： 擁有可寫或不可寫值的屬性*
可選鍵值：
configurable: 當(dāng)且僅當(dāng)configurable為true時，改屬性描述符才能夠被改變，也能被刪除
enumerable: 當(dāng)其值為true時，該屬性才能夠出現(xiàn)在對象的枚舉屬性中，默認(rèn)為false
writable: 當(dāng)且僅當(dāng)該屬性的值為true時，該屬性才能被賦值運(yùn)算符改變， 默認(rèn)為false。
value： 該屬性對應(yīng)的值，可以是任意有效的javascript的值（數(shù)值，對象，函數(shù)等），默認(rèn)為undefined
存取描述符： 由一對getter-setter函數(shù)功能來描述的屬性*
可選鍵值：
configurable: 當(dāng)且僅當(dāng)configurable為true時，改屬性描述符才能夠被改變，也能被刪除
enumerable: 當(dāng)其值為true時，該屬性才能夠出現(xiàn)在對象的枚舉屬性中，默認(rèn)為false
get: 給屬性提供getter的方法，如果沒有 getter 則為undefined。當(dāng)我們讀取某個屬性的時候，其實(shí)是在對象內(nèi)部調(diào)用了該 方法，此方法必須要有return語句。該方法返回值被用作屬性值。默認(rèn)為 undefined
set：設(shè)置屬性值的方法， 如果沒有 setter 則為 undefined。該方法將接受唯一參數(shù)，并將該參數(shù)的新值分配給該屬性。默認(rèn)為 undefined。也就是說，當(dāng)我們設(shè)置某個屬性的時候，實(shí)際上是在對象的內(nèi)部調(diào)用了該方法
note：兩者不能同時定義， 否則報錯==
get和set是我們今天要重點(diǎn)討論的兩個方法，先看一下他們的簡單實(shí)例：
實(shí)例：
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的值設(shè)置成了1，但是因?yàn)槲以趃et方法中始終返回了2，所以a.b的值一直是2。
那么，這就好玩兒了：我們可以在頁面監(jiān)聽某個變量，當(dāng)變量發(fā)生變化的時候，我們就更新對應(yīng)的視圖。由數(shù)據(jù)來驅(qū)動視圖的更新，是不是很熟悉？是的，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) {
//當(dāng)data.b的值改變的時候更新＃test的視圖
view.textContent = newValue;
},
get: function() {}
});
setInterval(function() {
i++;
data["b"] = "data.b的值更新了，我要更新視圖" + i;
}, 2000);
</script>
</body>
</html>
視圖的變化過程：
最開始的視圖：
2秒后的視圖：
重點(diǎn)理解：
// 3.Object.defineProperty(obj,propertyName,{}):給對象添加屬性(指定描述符)
const obj = {
firstName: 'A',
lastName: 'B',
}
// 給obj添加fullName屬性
// obj.fullName = 'A-B'
/*
1.數(shù)據(jù)描述符
configurable: 是否可以重新定義
enumerable: 是否可以枚舉
value: 初始值
writable: 是否可以修改屬性值
2.訪問描述符
get: 回調(diào)函數(shù)，根據(jù)其它相關(guān)的屬性動態(tài)計算得到當(dāng)前屬性值
set: 回調(diào)函數(shù)，監(jiān)視當(dāng)前屬性值的變化，更新其它相關(guān)的屬性值
*/
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 F
Object對象有一個freeze的方法，用于實(shí)現(xiàn)對象屬性和方法的不可更改
// 使用方法： const arr = [1,2,3,4]; Object.freeze(arr); // 變量arr不可更改 arr.push(5); // 報錯：不能添加屬性
Object.definePropperty也可以實(shí)現(xiàn)規(guī)定變量的不可更改
const obj = { key: 'chris', vlaue: 'person' };
Object.defineProperty(obj, 'key', {
configurable: false, // 不可刪除
writable: false, // 不可寫 });
})
若有不足請多多指教！希望給您帶來幫助！
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，謝謝大家對腳本之家的支持。如果你想了解更多相關(guān)內(nèi)容請查看下面相關(guān)鏈接
相關(guān)文章
這篇文章主要介紹了詳解VUE里子組件如何獲取父組件動態(tài)變化的值，子組件通過props獲取父組件傳過來的數(shù)據(jù)，子組件存在操作傳過來的數(shù)據(jù)并且傳遞給父組件,需要的朋友可以參考下2018-12-12
Vue中的this.$options.data()和this.$data用法說明
這篇文章主要介紹了Vue中的this.$options.data()和this.$data用法說明，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
關(guān)于Vue Router中路由守衛(wèi)的應(yīng)用及在全局導(dǎo)航守衛(wèi)中檢查元字段的方法
這篇文章主要介紹了關(guān)于Vue Router中路由守衛(wèi)的應(yīng)用及在全局導(dǎo)航守衛(wèi)中檢查元字段的方法，實(shí)現(xiàn)方法有兩種，本文通過實(shí)例代碼對每種方法介紹的很詳細(xì)，需要的朋友參考下2018-12-12
vue el-upload手動上傳實(shí)現(xiàn)過程
這篇文章主要介紹了vue el-upload手動上傳實(shí)現(xiàn)過程,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06
Vue過濾器filters用于一些常見的文本格式化,通過過濾器可以進(jìn)行處理成自己想要展示出來的格式,由“管道”符號指示,本文給大家介紹Vue過濾器filters使用方式,感興趣的朋友一起看看吧2023-10-10
Vue如何在CSS中使用data定義的數(shù)據(jù)淺析
這篇文章主要給大家介紹了關(guān)于Vue如何在CSS中使用data定義的數(shù)據(jù)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2022-05-05
Vue.js是JavaScript MVVM（Model-View-ViewModel）庫，十分簡潔，Vue核心只關(guān)注視圖層，相對AngularJS提供更加簡潔、易于理解的API。接下來通過本文給大家介紹vue的基本用法與常見指令，感興趣的朋友一起看看吧2017-08-08
vue2.0/3.0的響應(yīng)式原理及區(qū)別淺析
這篇文章主要給大家介紹了關(guān)于vue2.0/3.0響應(yīng)式原理及區(qū)別的相關(guān)資料，文中通過圖文介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
這篇文章主要介紹了Vue 換膚方案驗(yàn)證，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
BuildAdmin elementPlus自定義表頭添加tooltip方法示例
這篇文章主要介紹了BuildAdmin elementPlus 自定義表頭,添加tooltip實(shí)現(xiàn)方法示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09