在 ES5中新增了不少新的API, 例如  新增了 Object.xxx相關(guān)的方法,其中有一個定義屬性相關(guān)的 Object.defineProperty 這個方法(還有Object.defineProperties)這個方法是 vue框架實(shí)現(xiàn)數(shù)據(jù)監(jiān)聽的核心方法,它的定義如下:

Object.defineProperty([Object] obj, [String] propname, [Object] desp )

1. @param  obj  要配置屬性的某個對象
2. @param propname 要配置的屬性名,是一個字符串
3. @param desp 對屬性的描述,是一個對象,

desp 中可以配置的項(xiàng)目 

<1> writable:  true/false 是否可寫

<2> configurable : true/false 是否可以配置,例如刪除該屬性

<3> enumerable: true/false 指的是是否可以使用 for in循環(huán)遍歷屬性

<4> value:  值  ,屬性的值

我們在寫vue項(xiàng)目的時候會在 data屬性中添加我們自己的屬性,這個屬性在vue中是響應(yīng)式的,也就是它可以監(jiān)聽到數(shù)據(jù)的變化,做出相應(yīng)的改變(例如DOM操作)

我們自己利用 defineProperty給屬性生成setter和getter(也就是其他編程語言里的存取器),就可以達(dá)到監(jiān)聽數(shù)據(jù)變化的目的

下面我們來自己實(shí)現(xiàn)一個數(shù)據(jù)監(jiān)聽的小 demo

有如下的數(shù)據(jù)

  let vue = {
   data: {
    title: 'life style',
    content: 'bike walk sleep...'
   }
  };

已經(jīng)提前聲明的 data屬性及其內(nèi)部的屬性,我們的目標(biāo)是監(jiān)聽 data中,title和content的變化

如何做到呢? 屬性的個數(shù)是不確定的,所以我們可以使用 for in循環(huán)遍歷data對象的所有的屬性

  //如何監(jiān)聽用戶自定義的 data中屬性的改變?
  let data = vue.data;
  for (let prop in data) {
   data['__' + prop] = data[prop]; //存儲私有屬性
   Object.defineProperty(data, prop, {
    enumerable : true,
    set: function (newVal) {
     console.log('你正在修改'+prop + ' !...操作DOM...');
     // 數(shù)據(jù)校驗(yàn)
     this['__' + prop] = newVal;
    },
    get: function () {
     console.log('getter 獲取值 ...');
     return this['__' + prop];
    }
   });
  }

遍歷data屬性的時候調(diào)用 defineProperty來給data對象的屬性添加set和get方法,

我們給data添加一個新的屬性   __xxx來保存我們之前的值,以便在 get方法中獲取原來的值

set方法 用于監(jiān)聽這個屬性被重新賦值,

get方法用于獲取你想要的格式的值

此處需要注意的是 不要在 set和get中 使用this賦值或者取值,這樣會導(dǎo)致循環(huán)調(diào)用,出現(xiàn)問題!!!

另外 我們不要使用 var,而要使用 let ,因?yàn)関ar不是塊作用域, 會導(dǎo)致你最后訪問到的prop總是最后一個

定義好之后,我們可以修改 data中title和content屬性了,

當(dāng)我們給 title賦值的時候回自動調(diào)用 set, 獲取值得時候自動調(diào)用get

測試代碼

  // 賦值操作會調(diào)用這個屬性的set方法, 類似于 set('aaa')
  data.title = 'aaa';
  // 獲取值操作會調(diào)用這個屬性的get方法
  console.log(data.title);
  data.content = 123;
  // 此種動態(tài)屬性方式也會觸發(fā) set / get
  data['title'] = 123;
  console.log(data['title']);

結(jié)果(建議在最新版的chrome中操作):

對剛剛的遍歷方法還存在一些問題和說明:

1.data屬性的某個屬性可能還是對象,也就是存在多層級對象監(jiān)聽的問題

此時可以使用遞歸函數(shù)遍歷data的屬性,進(jìn)行相同操作

2. 通過  data.title = 1是實(shí)際上是調(diào)用了 set方法, 這個類似于 OC中的點(diǎn)語法

3. 要同時定義多個屬性,可以使用

Object.defineProperties([Object] obj, [Object] props);

需要注意的是, 本文只是介紹 defineProperty的基本使用,并非代表vue的代碼實(shí)現(xiàn)

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評論