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è)參考。一起跟隨小編過來看看吧

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

參考版本 vue源碼版本：0.11

相關(guān)

vue實(shí)現(xiàn)雙向數(shù)據(jù)綁定的關(guān)鍵是 Object.defineProperty ，讓我們先來看下這個(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' + '被訪問');
  },
  set: function(newVal){
    console.log('b' + '被修改，新' + 'b' + '=' + newVal);
  }
});

a.b = 2;  // b被修改，新b=2
a.b;    // b被訪問

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

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

在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){
    // 通過 hasOwnProperty 過濾掉一個(gè)對(duì)象本身?yè)碛械膶傩?
    if(obj.hasOwnProperty(key)){
      val = obj[key];
      // 遞歸調(diào)用 循環(huán)所有對(duì)象出來
      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 + '被訪問');
    },
    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被訪問

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

您可能感興趣的文章:

相關(guān)文章

解決vue終端報(bào)錯(cuò):不是內(nèi)部或外部命令
最近學(xué)習(xí)一下前端框架Vue,整體上感覺還是比較有意思的,但是在安裝vue-cli腳手架的時(shí)候,出現(xiàn)了一些問題,解決問題也花費(fèi)了不少時(shí)間,下面這篇文章主要給大家介紹了關(guān)于解決vue終端報(bào)錯(cuò):不是內(nèi)部或外部命令的相關(guān)資料,需要的朋友可以參考下
2023-02-02
Vue不能檢測(cè)到Object/Array更新的情況的解決
本篇文章主要介紹了Vue不能檢測(cè)到Object/Array更新的情況的解決，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-06-06
在Vue項(xiàng)目中,防止頁(yè)面被縮放和放大示例
今天小編就為大家分享一篇在Vue項(xiàng)目中,防止頁(yè)面被縮放和放大示例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2019-10-10
vue3+vite自定義封裝vue組件發(fā)布到npm包的全過程
當(dāng)市面上主流的組件庫(kù)不能滿足我們業(yè)務(wù)需求的時(shí)候,那么我們就有必要開發(fā)一套屬于自己團(tuán)隊(duì)的組件庫(kù),下面這篇文章主要給大家介紹了關(guān)于vue3+vite自定義封裝vue組件發(fā)布到npm包的相關(guān)資料,需要的朋友可以參考下
2022-09-09
基于vue-cli、elementUI的Vue超簡(jiǎn)單入門小例子（推薦）
這篇文章主要介紹了基于vue-cli、elementUI的Vue超簡(jiǎn)單入門小例子，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
Vue3前端做打印頁(yè)面信息實(shí)現(xiàn)打印功能(打印界面某個(gè)部分)
這篇文章主要介紹了如何使用vue3-print-nb依賴在Vue?3項(xiàng)目中實(shí)現(xiàn)頁(yè)面打印功能,提供了完整的代碼示例,大家可以根據(jù)項(xiàng)目需求選擇合適的打印方法,需要的朋友可以參考下
2025-02-02
vue中使用element日歷組件的示例代碼
這篇文章主要介紹了vue中如何使用element的日歷組件，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2021-09-09
vue加載完成后的回調(diào)函數(shù)方法
今天小編就為大家分享一篇vue加載完成后的回調(diào)函數(shù)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
Vue使用distpicker插件實(shí)現(xiàn)省市級(jí)下拉框三級(jí)聯(lián)動(dòng)
這篇文章主要介紹了Vue使用distpicker插件實(shí)現(xiàn)省市級(jí)下拉框三級(jí)聯(lián)動(dòng),比如通過JSON文件生成對(duì)應(yīng)的區(qū)域下拉框，element-china-are插件，包括distpicker插件，通過代碼講解如何使用distpicker插件實(shí)現(xiàn)省市級(jí)三聯(lián)跳動(dòng)，需要的朋友可以參考下
2023-02-02
vue+element表格實(shí)現(xiàn)多層數(shù)據(jù)的嵌套方式
這篇文章主要介紹了vue+element表格實(shí)現(xiàn)多層數(shù)據(jù)的嵌套方式，具有很好的參考價(jià)值。希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-09-09