快捷導(dǎo)航

vue深度監(jiān)聽(tīng)(監(jiān)聽(tīng)對(duì)象和數(shù)組的改變)與立即執(zhí)行監(jiān)聽(tīng)實(shí)例

更新時(shí)間：2020年09月04日 09:54:04 作者：前端@小菜

這篇文章主要介紹了vue深度監(jiān)聽(tīng)(監(jiān)聽(tīng)對(duì)象和數(shù)組的改變)與立即執(zhí)行監(jiān)聽(tīng)實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

1.vue中監(jiān)聽(tīng)對(duì)象數(shù)據(jù)屬性值的改變，可以使用深度監(jiān)聽(tīng)

 data () {
  return {
   form: {
    status: '',
    cpufrequency: '',
    systemstacksize: '',
    scalabilityclass: ''
   }
  }
 },
 watch: {
  form: { // 深度監(jiān)聽(tīng)
   handler(val, oldVal){
    console.log('currentForm',val, oldVal)
    // 但是這兩個(gè)值打印出來(lái)卻都是一樣的,因?yàn)樗鼈兊囊弥赶蛲粋€(gè)對(duì)象/數(shù)組
   },
   deep:true
  }
 }

注意：我們應(yīng)盡量避免在監(jiān)聽(tīng)方法中更改當(dāng)前監(jiān)聽(tīng)對(duì)象的屬性值，以免再次觸發(fā)監(jiān)聽(tīng)函數(shù)

2.若只監(jiān)聽(tīng)某個(gè)或部分屬性值的變化，則可以配合計(jì)算屬性computed來(lái)解決

 data () {
  return {
   form: {
    status: '',
    cpufrequency: '',
    systemstacksize: '',
    scalabilityclass: ''
   }
  }
 },
 computed: {
  status() {
   return this.form.status
  }
 },
 watch: {
  status() {
   console.log('currentVal', this.status)
  }
 }

當(dāng)然，上面這種方法會(huì)多出一個(gè)計(jì)算屬性，并不是最好的方法，通過(guò)查看官方api，其實(shí)還有一種方法：

 data () {
  return {
   form: {
    status: '',
    cpufrequency: '',
    systemstacksize: '',
    scalabilityclass: ''
   }
  }
 },
 watch: {
  'form.status'(val, oldVal) {
   console.log('currentVal', val)
  }
 }

3.取消監(jiān)聽(tīng)

var unwatch = vm.$watch('a', cb) // 返回一個(gè)取消監(jiān)聽(tīng)函數(shù)

unwatch() // 取消觀察函數(shù)

4.立即觸發(fā)監(jiān)聽(tīng)

我們有時(shí)會(huì)有這個(gè)需求，在頁(yè)面初始化時(shí)執(zhí)行某個(gè)監(jiān)聽(tīng)。因此，我們可能會(huì)在 created 中去調(diào)用需要執(zhí)行的監(jiān)聽(tīng)代碼，但現(xiàn)在我們可以使用 immediate 來(lái)實(shí)現(xiàn)這個(gè)功能。

 watch: {
  'form.status'() {
   handler(val, oldVal) {
    // 執(zhí)行一些操作
   },
   immediate: true
  }
 }

補(bǔ)充知識(shí)：vue watch監(jiān)聽(tīng)數(shù)據(jù)，新老值一樣？讓其不一樣吧！

我就廢話不多說(shuō)了，大家還是直接看代碼吧~

 data:{
    testData:{
      dataInfo:{
        a: '我是a',
        b: '我是b'
      }
    }
  },
  watch: {
   testData: {
    handler: (val, olVal) => {
     console.log('我變化了', val, olVal)
    },
    deep: true
   }
  }

如果testData發(fā)生了變化，就會(huì)打印出val，olVal，但是他們打印出來(lái)的結(jié)果都是一樣的，因?yàn)閿?shù)據(jù)同源。雖然可以監(jiān)聽(tīng)到他的變化，但是要比較數(shù)據(jù)差異就不行了。如果想要得到不同的值可以結(jié)合計(jì)算屬性。

  data:{
    testData:{
      dataInfo:{
        a: '我是a',
        b: '我是b'
      }
    }
  },
  watch: {
   testDataNew: {
    handler: (val, olVal) => {
     console.log('我變化了', val, olVal)
    },
    deep: true
   }
  },
  computed: {
   testDataNew() {
    return JSON.parse(JSON.stringify(this.testData))
   }
  }

以上這篇vue深度監(jiān)聽(tīng)(監(jiān)聽(tīng)對(duì)象和數(shù)組的改變)與立即執(zhí)行監(jiān)聽(tīng)實(shí)例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: