vue Deep Listening of Listening Object and Array Changes and Executing Listening Instances Immediately

1. Depth monitoring can be used for the change of data attribute value of monitoring object in vue

 data () {
  return {
   form: {
    status: '',
    cpufrequency: '',
    systemstacksize: '',
    scalabilityclass: ''
   }
  }
 },
 watch: {
  form: { //  Depth monitoring 
   handler(val, oldVal){
    console.log('currentForm',val, oldVal)
    //  But these two values print out to be both 1 Like , Because their references point to the same 1 Objects / Array 
   },
   deep:true
  }
 }

Note: We should try to avoid changing the property value of the current listener in the listener method, so as not to trigger the listener function again

2. If you only listen to the change of one or some attribute values, you can cooperate with the calculation attribute computed to solve the problem

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

Of course, the above method will have one more calculation attribute, which is not the best method. By looking at the official api, there is actually another method:

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

Step 3 Cancel listening

var unwatch = vm. $watch ('a', cb)//Returns 1 unlistener function

unwatch ()//Cancel the observation function

Step 4 Trigger listening immediately

We sometimes have this requirement to perform some listening when the page is initialized. Therefore, we may call the listening code that needs to be executed in created, but now we can use immediate to realize this function.

 watch: {
  'form.status'() {
   handler(val, oldVal) {
    //  Execute 1 Some operations 
   },
   immediate: true
  }
 }

Supplementary knowledge: vue watch monitoring data, new and old values 1 sample? Let it be different!

I won't talk too much, let's just look at the code ~

 data:{
    testData:{
      dataInfo:{
        a: ' I am a',
        b: ' I am b'
      }
    }
  },
  watch: {
   testData: {
    handler: (val, olVal) => {
     console.log(' I've changed ', val, olVal)
    },
    deep: true
   }
  }

If testData changes, val and olVal will be printed, but they all print identical results because the data are homologous. Although you can monitor his changes, you can't compare the data differences. If you want to get different values, you can combine the calculated attributes.

  data:{
    testData:{
      dataInfo:{
        a: ' I am a',
        b: ' I am b'
      }
    }
  },
  watch: {
   testDataNew: {
    handler: (val, olVal) => {
     console.log(' I've changed ', val, olVal)
    },
    deep: true
   }
  },
  computed: {
   testDataNew() {
    return JSON.parse(JSON.stringify(this.testData))
   }
  }