快捷導(dǎo)航

vue中的watch監(jiān)聽數(shù)據(jù)變化及watch中各屬性的詳解

更新時(shí)間：2018年09月11日 15:39:20 作者：Forward_wuyi

這篇文章主要介紹了vue中的watch監(jiān)聽數(shù)據(jù)變化及watch中的immediate、handler和deep屬性詳解，本文大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧

首先確認(rèn) watch是一個(gè)對(duì)象，一定要當(dāng)成對(duì)象來用。

對(duì)象就有鍵，有值。

鍵：就是你要監(jiān)控的那個(gè)家伙，比如說$route，這個(gè)就是要監(jiān)控路由的變化。或者是data中的某個(gè)變量。
值可以是函數(shù)：就是當(dāng)你監(jiān)控的家伙變化時(shí)，需要執(zhí)行的函數(shù)，這個(gè)函數(shù)有兩個(gè)形參，第一個(gè)是當(dāng)前值，第二個(gè)是變化后的值。

值也可以是函數(shù)名：不過這個(gè)函數(shù)名要用單引號(hào)來包裹。

第三種情況厲害了。

值是包括選項(xiàng)的對(duì)象：選項(xiàng)包括有三個(gè)。

1.第一個(gè)handler：其值是一個(gè)回調(diào)函數(shù)。即監(jiān)聽到變化時(shí)應(yīng)該執(zhí)行的函數(shù)。
2.第二個(gè)是deep：其值是true或false；確認(rèn)是否深入監(jiān)聽。（一般監(jiān)聽時(shí)是不能監(jiān)聽到對(duì)象屬性值的變化的，數(shù)組的值變化可以聽到。）
3.第三個(gè)是immediate：其值是true或false；確認(rèn)是否以當(dāng)前的初始值執(zhí)行handler的函數(shù)。

1、watch使用的幾種方法

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

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

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

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

（3）通過watch監(jiān)聽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)聽函數(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)聽一個(gè)對(duì)象的改變時(shí)，普通的watch方法無法監(jiān)聽到對(duì)象內(nèi)部屬性的改變，此時(shí)就需要deep屬性對(duì)對(duì)象進(jìn)行深度監(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的變化，此時(shí)會(huì)給docData的所有屬性都加上這個(gè)監(jiān)聽器，當(dāng)對(duì)象屬性較多時(shí)，每個(gè)屬性值的變化都會(huì)執(zhí)行handler。如果只需要監(jiān)聽對(duì)象中的一個(gè)屬性值，則可以做以下優(yōu)化：使用字符串的形式監(jiān)聽對(duì)象屬性：

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

這樣只會(huì)給對(duì)象的某個(gè)特定的屬性加監(jiān)聽器

3、總結(jié)

數(shù)組（一維、多維）的變化不需要通過深度監(jiān)聽，對(duì)象數(shù)組中對(duì)象的屬性變化則需要deep深度監(jiān)聽。

以上所述是小編給大家介紹的vue中的watch監(jiān)聽數(shù)據(jù)變化及watch中各屬性的詳解，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: