1.vue中監聽物件資料屬性值的改變，可以使用深度監聽

 data () {
  return {
   form: {
    status: '',cpufrequency: '',systemstacksize: '',scalabilityclass: ''
   }
  }
 },watch: {
  form: { // 深度監聽
   handler(val,oldVal){
    console.log('currentForm',val,oldVal)
    // 但是這兩個值打印出來卻都是一樣的,因為它們的引用指向同一個物件/陣列
   },deep:true
  }
 }

注意：我們應儘量避免在監聽方法中更改當前監聽物件的屬性值，以免再次觸發監聽函式

2.若只監聽某個或部分屬性值的變化，則可以配合計算屬性computed來解決

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

當然，上面這種方法會多出一個計算屬性，並不是最好的方法，通過檢視官方api，其實還有一種方法：

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

3.取消監聽

var unwatch = vm.$watch('a',cb) // 返回一個取消監聽函式

unwatch() // 取消觀察函式

4.立即觸發監聽

我們有時會有這個需求，在頁面初始化時執行某個監聽。因此，我們可能會在 created 中去呼叫需要執行的監聽程式碼，但現在我們可以使用 immediate 來實現這個功能。

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

補充知識：vue watch監聽資料，新老值一樣？讓其不一樣吧！

我就廢話不多說了，大家還是直接看程式碼吧~

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

如果testData發生了變化，就會打印出val，olVal，但是他們打印出來的結果都是一樣的，因為資料同源。雖然可以監聽到他的變化，但是要比較資料差異就不行了。如果想要得到不同的值可以結合計算屬性。

  data:{
    testData:{
      dataInfo:{
        a: '我是a',watch: {
   testDataNew: {
    handler: (val,deep: true
   }
  },computed: {
   testDataNew() {
    return JSON.parse(JSON.stringify(this.testData))
   }
  }

以上這篇vue深度監聽(監聽物件和陣列的改變)與立即執行監聽例項就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。