How to implement changes in watch monitoring objects and corresponding values ​​in vue

Below I will share with you a detailed explanation of the changes in vue watch monitoring objects and corresponding values. It has a good reference value and I hope it will be helpful to everyone.

is as follows:

var vm=new Vue({
  data:{
    a:1,
    b:{
      c:1
    }
  },
  watch:{
    a(val, oldVal){//普通的watch监听
      console.log("a: "+val, oldVal);
    },
    b:{//深度监听，可监听到对象、数组的变化
      handler(val, oldVal){
        console.log("b.c: "+val.c, oldVal.c);//但是这两个值打印出来却都是一样的
      },
      deep:true
    }
  }
})
vm.a=2
vm.b.c=2

a is an ordinary value, when a will be monitored when the value of b changes. b is an object and cannot be written directly like a. In-depth monitoring is required to capture it. However, when I wanted to capture the change of a certain value in the b object, I found that the two printed The values ​​are different, as shown in the figure:

In this way, you can only know that the object has changed but not which specific value has changed. If you want to monitor a certain value of the object Changes can be made by using the calculated attribute computed

var vm=new Vue({
  data:{
    b:{
      c:1
    }
  },
  watch:{
    newValue(val, oldVal){
      console.log("b.c: "+val, oldVal);
    }
  },
  computed: {
  　　newValue() {
  　　　　return this.b.c
  　　}
  }
})
vm.b.c=2

Use watch to monitor the computed value and you can directly know which corresponding value has changed. The result is as shown in the figure :

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Simple web server function example implemented by nodejs

Project created by vue-cli, with many configurations Page implementation method

Nodejs simple method of accessing and operating mysql database example

The above is the detailed content of How to implement changes in watch monitoring objects and corresponding values ​​in vue. For more information, please follow other related articles on the PHP Chinese website!