vue中如何利用watch監(jiān)聽(tīng)數(shù)據(jù)變化

這篇文章主要介紹“vue中如何利用watch監(jiān)聽(tīng)數(shù)據(jù)變化”的相關(guān)知識(shí)，小編通過(guò)實(shí)際案例向大家展示操作過(guò)程，操作方法簡(jiǎn)單快捷，實(shí)用性強(qiáng)，希望這篇“vue中如何利用watch監(jiān)聽(tīng)數(shù)據(jù)變化”文章能幫助大家解決問(wèn)題。

創(chuàng)新互聯(lián)為企業(yè)提供：品牌網(wǎng)站設(shè)計(jì)、網(wǎng)絡(luò)營(yíng)銷(xiāo)策劃、小程序定制開(kāi)發(fā)、營(yíng)銷(xiāo)型網(wǎng)站建設(shè)和網(wǎng)站運(yùn)營(yíng)托管，一站式網(wǎng)絡(luò)營(yíng)銷(xiāo)整體服務(wù)。實(shí)現(xiàn)不斷獲取潛在客戶(hù)之核心目標(biāo)，建立了企業(yè)專(zhuān)屬的“全網(wǎng)整合營(yíng)銷(xiāo)推廣”，就用不著再為了獲取潛在客戶(hù)而苦惱，相反，客戶(hù)會(huì)主動(dòng)找您，生意就找上門(mén)來(lái)了！

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
  }  
}

關(guān)于“vue中如何利用watch監(jiān)聽(tīng)數(shù)據(jù)變化”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。

網(wǎng)站題目：vue中如何利用watch監(jiān)聽(tīng)數(shù)據(jù)變化
當(dāng)前網(wǎng)址：http://bm7419.com/article22/jcsjjc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營(yíng)銷(xiāo)、搜索引擎優(yōu)化、網(wǎng)站設(shè)計(jì)公司、靜態(tài)網(wǎng)站、品牌網(wǎng)站設(shè)計(jì)、定制網(wǎng)站

廣告

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