亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

vue源碼學(xué)習(xí)之Object.defineProperty對(duì)象屬性監(jiān)聽

 更新時(shí)間:2018年05月30日 09:47:19   作者:iiijarvis  
這篇文章主要介紹了vue源碼學(xué)習(xí)之Object.defineProperty對(duì)象屬性監(jiān)聽,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

本文介紹了vue源碼學(xué)習(xí)之Object.defineProperty對(duì)象屬性監(jiān)聽,分享給大家,具體如下:

參考版本 vue源碼版本:0.11

相關(guān)

vue實(shí)現(xiàn)雙向數(shù)據(jù)綁定的關(guān)鍵是 Object.defineProperty ,讓我們先來(lái)看下這個(gè)函數(shù)。

在MDN上查看有關(guān)Object.defineProperty 的解釋。

我們先從最簡(jiǎn)單的開始:

let a = {'b': 1};
Object.defineProperty(a, 'b', {
  enumerable: false,
  configurable: false,
  get: function(){
    console.log('b' + '被訪問(wèn)');
  },
  set: function(newVal){
    console.log('b' + '被修改,新' + 'b' + '=' + newVal);
  }
});

a.b = 2;  // b被修改,新b=2
a.b;    // b被訪問(wèn)

這樣,我們就能監(jiān)聽對(duì)象了!但問(wèn)題并不僅僅這么簡(jiǎn)單。。。

我們可能會(huì)有對(duì)象中屬性的值還是對(duì)象這種嵌套情況,可以通過(guò)遞歸解決!

在vue源代碼文件 srcobserveobserver.js 中

// 觀察者構(gòu)造函數(shù)
function Observer(data){
  this.data = data;
  this.walk(data);
}

let p = Observer.prototype;
p.walk = function(obj){
  let val;
  for(let key in obj){
    // 通過(guò) hasOwnProperty 過(guò)濾掉一個(gè)對(duì)象本身?yè)碛械膶傩?
    if(obj.hasOwnProperty(key)){
      val = obj[key];
      // 遞歸調(diào)用 循環(huán)所有對(duì)象出來(lái)
      if(typeof val === 'object'){
        new Observer(val);
      }
      this.convert(key, val);
    }
  }
};

p.convert = function(key, val){
  Object.defineProperty(this.data, key, {
    enumerable: false,
    configurable: false,
    get: function(){
      console.log(key + '被訪問(wèn)');
    },
    set: function(newVal){
      console.log(key + '被修改,新' + key + '=' + newVal);
      if(newVal === val) return ;
      val = newVal;
    }
  })
};

let data = {
  user: {
    name: 'zhangsan',
    age: 14
  },
  address: {
    city: 'beijing'
  }
}

let app = new Observer(data);
data.user.name;  // user被訪問(wèn) 

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

相關(guān)文章

  • 對(duì)類Vue的MVVM前端庫(kù)的實(shí)現(xiàn)代碼

    對(duì)類Vue的MVVM前端庫(kù)的實(shí)現(xiàn)代碼

    這篇文章主要介紹了對(duì)類Vue的MVVM前端庫(kù)的實(shí)現(xiàn)代碼,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2018-09-09
  • 在vue中:style 的使用方式匯總

    在vue中:style 的使用方式匯總

    在Vue開發(fā)中使用:style綁定樣式是常見需求,應(yīng)注意:class與:style的配合使用,錯(cuò)誤的使用可能導(dǎo)致樣式不生效,正確的方法是使用數(shù)組綁定多個(gè)樣式,這些技巧有助于提高開發(fā)效率和保持代碼整潔,感興趣的朋友跟隨小編一起看看吧
    2024-09-09
  • Vue 中如何正確引入第三方模塊的方法步驟

    Vue 中如何正確引入第三方模塊的方法步驟

    這篇文章主要介紹了Vue 中如何正確引入第三方模塊的方法步驟,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2019-05-05
  • Vue分頁(yè)器組件使用方法詳解

    Vue分頁(yè)器組件使用方法詳解

    這篇文章主要為大家詳細(xì)介紹了Vue分頁(yè)器組件的使用方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-03-03
  • vue-cli 引入、配置axios的方法

    vue-cli 引入、配置axios的方法

    這篇文章主要介紹了vue-cli 引入axios的方法,文中還給大家提到了vue-cli 配置axios的方法,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下
    2018-05-05
  • vue3的自定義hook函數(shù)使用

    vue3的自定義hook函數(shù)使用

    這篇文章主要介紹了vue3的自定義hook函數(shù)使用,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • 解決vue-element-admin中配置跨域出現(xiàn)的問(wèn)題

    解決vue-element-admin中配置跨域出現(xiàn)的問(wèn)題

    這篇文章主要介紹了解決vue-element-admin中配置跨域出現(xiàn)的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2024-07-07
  • vue  自定義組件實(shí)現(xiàn)通訊錄功能

    vue 自定義組件實(shí)現(xiàn)通訊錄功能

    本文通過(guò)實(shí)例代碼給介紹了vue使用自定義組件實(shí)現(xiàn)通訊錄功能,需要的朋友可以參考下
    2018-09-09
  • vue3+vite實(shí)現(xiàn)在線預(yù)覽pdf功能

    vue3+vite實(shí)現(xiàn)在線預(yù)覽pdf功能

    這篇文章主要為大家詳細(xì)介紹了如何通過(guò)vue3和vite實(shí)現(xiàn)在線預(yù)覽pdf功能,文中的示例代碼簡(jiǎn)潔易懂,具有一定的借鑒價(jià)值,感興趣的小伙伴可以學(xué)習(xí)一下
    2023-10-10
  • 加快Vue項(xiàng)目的開發(fā)速度的方法

    加快Vue項(xiàng)目的開發(fā)速度的方法

    這篇文章主要介紹了加快Vue項(xiàng)目的開發(fā)速度的方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-12-12

最新評(píng)論