欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

vue.js的雙向數(shù)據(jù)綁定Object.defineProperty方法的神奇之處

vue.js 2.0版的雙向數(shù)據(jù)綁定就是通過Object.defineProperty方法實(shí)現(xiàn)的，俗稱屬性攔截器。

成都創(chuàng)新互聯(lián)服務(wù)項(xiàng)目包括神木網(wǎng)站建設(shè)、神木網(wǎng)站制作、神木網(wǎng)頁(yè)制作以及神木網(wǎng)絡(luò)營(yíng)銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，神木網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到神木省份的部分城市，未來相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

這么說吧，vue.js是通過它實(shí)現(xiàn)雙向綁定的。俗稱屬性攔截器。而且專門用來監(jiān)控對(duì)象屬性變化的Object.observe方法也被草案發(fā)起人撤回了(此方法在node環(huán)境中仍能使用)?？梢奷efineProperty的威力之大。

Object.defineProperty()    不支持ie8

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

// 語(yǔ)法: 
/*
 * Object.defineProperty(obj,prop,descriptor)
 * @param: obj:需要定義屬性的對(duì)象;
 *     prop:需要定義或修改的屬性；
 *     descriptor:將被定義或修改屬性的描述符{}
 * 返回值 : 返回傳入函數(shù)的對(duì)象，即第一個(gè)參數(shù)obj
 */

對(duì)象里目前存在的屬性描述符主要有兩種形式： 數(shù)據(jù)描述符和存取描述符.

數(shù)據(jù)描述符： 擁有可寫或不可寫值的屬性*

        可選鍵值：
        configurable: 當(dāng)且僅當(dāng)configurable為true時(shí)，改屬性描述符才能夠被改變，也能被刪除
        enumerable: 當(dāng)其值為true時(shí)，該屬性才能夠出現(xiàn)在對(duì)象的枚舉屬性中，默認(rèn)為false
        writable: 當(dāng)且僅當(dāng)該屬性的值為true時(shí)，該屬性才能被賦值運(yùn)算符改變， 默認(rèn)為false。
        value： 該屬性對(duì)應(yīng)的值，可以是任意有效的javascript的值（數(shù)值，對(duì)象，函數(shù)等），默認(rèn)為undefined

存取描述符： 由一對(duì)getter-setter函數(shù)功能來描述的屬性*

        可選鍵值：
        configurable: 當(dāng)且僅當(dāng)configurable為true時(shí)，改屬性描述符才能夠被改變，也能被刪除
        enumerable: 當(dāng)其值為true時(shí)，該屬性才能夠出現(xiàn)在對(duì)象的枚舉屬性中，默認(rèn)為false
        get: 給屬性提供getter的方法，如果沒有 getter 則為undefined。當(dāng)我們讀取某個(gè)屬性的時(shí)候，其實(shí)是在對(duì)象內(nèi)部調(diào)用了該 方法，此方法必須要有return語(yǔ)句。該方法返回值被用作屬性值。默認(rèn)為 undefined
        set：設(shè)置屬性值的方法， 如果沒有 setter 則為 undefined。該方法將接受唯一參數(shù)，并將該參數(shù)的新值分配給該屬性。默認(rèn)為 undefined。也就是說，當(dāng)我們?cè)O(shè)置某個(gè)屬性的時(shí)候，實(shí)際上是在對(duì)象的內(nèi)部調(diào)用了該方法

note：兩者不能同時(shí)定義， 否則報(bào)錯(cuò)==

get和set是我們今天要重點(diǎn)討論的兩個(gè)方法，先看一下他們的簡(jiǎ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。

那么，這就好玩兒了：我們可以在頁(yè)面監(jiān)聽某個(gè)變量，當(dāng)變量發(fā)生變化的時(shí)候，我們就更新對(duì)應(yīng)的視圖。由數(shù)據(jù)來驅(qū)動(dòng)視圖的更新，是不是很熟悉？是的，vue .js的核心思想就是這個(gè)。我們寫個(gè)小例子：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8" />
  <title>defineProperty</title>
 </head>
 <body>
  <div id="test">這是一個(gè)測(cè)試</div>
  <script>
   var view = document.getElementById("test");
   var data = {};
   var i = 0;
   Object.defineProperty(data, "b", {
    set: function(newValue) {
     //當(dāng)data.b的值改變的時(shí)候更新＃test的視圖
     view.textContent = newValue;
    },
    get: function() {}
   });
   setInterval(function() {
    i++;
    data["b"] = "data.b的值更新了，我要更新視圖" + i;
   }, 2000);
  </script>
 </body>
</html>

視圖的變化過程：

vue.js的雙向數(shù)據(jù)綁定Object.defineProperty方法的神奇之處

最開始的視圖：

vue.js的雙向數(shù)據(jù)綁定Object.defineProperty方法的神奇之處

2秒后的視圖：

vue.js的雙向數(shù)據(jù)綁定Object.defineProperty方法的神奇之處

重點(diǎn)理解：

  // 3.Object.defineProperty(obj,propertyName,{}):給對(duì)象添加屬性(指定描述符)
  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)的屬性動(dòng)態(tài)計(jì)算得到當(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對(duì)象有一個(gè)freeze的方法，用于實(shí)現(xiàn)對(duì)象屬性和方法的不可更改

// 使用方法：
const arr = [1,2,3,4];
Object.freeze(arr); // 變量arr不可更改
arr.push(5); // 報(bào)錯(cuò)：不能添加屬性

Object.definePropperty也可以實(shí)現(xiàn)規(guī)定變量的不可更改

const obj = { key: 'chris', vlaue: 'person' }; 
Object.defineProperty(obj, 'key', { 
  configurable: false, // 不可刪除 
  writable: false, // 不可寫 });
})

若有不足請(qǐng)多多指教！希望給您帶來幫助！

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，謝謝大家對(duì)創(chuàng)新互聯(lián)的支持。如果你想了解更多相關(guān)內(nèi)容請(qǐng)查看下面相關(guān)鏈接

本文題目：vue.js的雙向數(shù)據(jù)綁定Object.defineProperty方法的神奇之處
轉(zhuǎn)載來于：http://chinadenli.net/article34/gigcse.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、ChatGPT、網(wǎng)站改版、外貿(mào)建站、網(wǎng)站排名、營(yíng)銷型網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

外貿(mào)網(wǎng)站建設(shè)