vue中怎么利用watch監(jiān)聽(tīng)數(shù)據(jù)變化，相信很多沒(méi)有經(jīng)驗(yàn)的人對(duì)此束手無(wú)策，為此本文總結(jié)了問(wèn)題出現(xiàn)的原因和解決方法，通過(guò)這篇文章希望你能解決這個(gè)問(wèn)題。

創(chuàng)新互聯(lián)建站專注于企業(yè)營(yíng)銷型網(wǎng)站建設(shè)、網(wǎng)站重做改版、遜克網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、HTML5建站、商城網(wǎng)站建設(shè)、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)網(wǎng)站制作、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為遜克等各大城市提供網(wǎng)站開(kāi)發(fā)制作服務(wù)。

1、watch使用的幾種方法

（1）通過(guò)watch監(jiān)聽(tīng)data數(shù)據(jù)的變化，數(shù)據(jù)發(fā)生變化時(shí)，就會(huì)打印當(dāng)前的值

watch: {
  data(val, newval) {
    console.log(val)
    console.log(newval)
  }
 }

（2）通過(guò)watch監(jiān)聽(tīng)docData數(shù)據(jù)的變化，數(shù)據(jù)發(fā)生變化時(shí)，this.change_number++（使用深度監(jiān)聽(tīng)）

watch: {
  docData: {
   handler(newVal) {
    this.change_number++
   },
   deep: true
  }
}

（3）通過(guò)watch監(jiān)聽(tīng)data數(shù)據(jù)的變化，數(shù)據(jù)發(fā)生變化時(shí),執(zhí)行changeData方法

watch: {
  data： 'changeData' // 值可以為methods的方法名
}，
methods: {
   changeData(curVal,oldVal){
  　　　 conosle.log(curVal,oldVal)
　　}
}

2、詳解watch中的immediate、handler和deep屬性

（1）immediate和handler

這樣使用watch時(shí)有一個(gè)特點(diǎn)，就是當(dāng)值第一次綁定時(shí)，不會(huì)執(zhí)行監(jiān)聽(tīng)函數(shù)，只有值發(fā)生改變時(shí)才會(huì)執(zhí)行。如果我們需要在最初綁定值的時(shí)候也執(zhí)行函數(shù)，則就需要用到immediate屬性。

eg：

watch: {
   docData: {
    handler(newVal) {
      this.change_number++
    },
    immediate: true
   }
}

（2）deep

當(dāng)需要監(jiān)聽(tīng)一個(gè)對(duì)象的改變時(shí)，普通的watch方法無(wú)法監(jiān)聽(tīng)到對(duì)象內(nèi)部屬性的改變，此時(shí)就需要deep屬性對(duì)對(duì)象進(jìn)行深度監(jiān)聽(tīng)。

eg:
data() {
  return {
    docData: {
      'doc_id': 1,
      'tpl_data': 'abc'
    }
  }
}，
watch: {
   docData: {
    handler(newVal) {
      this.change_number++
    },
    deep: true
  }  
}

設(shè)置deep:true則可以監(jiān)聽(tīng)到docData.doc_id的變化，此時(shí)會(huì)給docData的所有屬性都加上這個(gè)監(jiān)聽(tīng)器，當(dāng)對(duì)象屬性較多時(shí)，每個(gè)屬性值的變化都會(huì)執(zhí)行handler。如果只需要監(jiān)聽(tīng)對(duì)象中的一個(gè)屬性值，則可以做以下優(yōu)化：使用字符串的形式監(jiān)聽(tīng)對(duì)象屬性：

eg:
data() {
  return {
    docData: {
      'doc_id': 1,
      'tpl_data': 'abc'
    }
  }
}，
watch: {
  'docData.doc_id': {
    handler(newVal, oldVal) {
      ......
    },
    deep: true
  }  
}

看完上述內(nèi)容，你們掌握vue中怎么利用watch監(jiān)聽(tīng)數(shù)據(jù)變化的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道，感謝各位的閱讀！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

本文名稱：vue中怎么利用watch監(jiān)聽(tīng)數(shù)據(jù)變化-創(chuàng)新互聯(lián)
文章出自：http://weahome.cn/article/ccsohc.html