vue如何用watch監(jiān)聽數(shù)據(jù)變化

這篇文章主要介紹“vue如何用watch監(jiān)聽數(shù)據(jù)變化”，在日常操作中，相信很多人在vue如何用watch監(jiān)聽數(shù)據(jù)變化問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”vue如何用watch監(jiān)聽數(shù)據(jù)變化”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

1、watch使用的幾種方法

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

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

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

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

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

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

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

（1）immediate和handler

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

eg：

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

（2）deep

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

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

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

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

Vue的優(yōu)點

Vue具體輕量級框架、簡單易學(xué)、雙向數(shù)據(jù)綁定、組件化、數(shù)據(jù)和結(jié)構(gòu)的分離、虛擬DOM、運行速度快等優(yōu)勢，Vue中頁面使用的是局部刷新，不用每次跳轉(zhuǎn)頁面都要請求所有數(shù)據(jù)和dom，可以大大提升訪問速度和用戶體驗。

到此，關(guān)于“vue如何用watch監(jiān)聽數(shù)據(jù)變化”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>