Vue uses watch to listen for properties in an object

Problem description

Vue provides a watch method that allows users to listen for data changes in certain data and trigger corresponding methods, such as

 queryData: {
   name: '',
   creator: '',
   selectedStatus: '',
   time: [],
 },

The first solution: direct object

Now I need to listen to this queryData, I can do this:

watch: {
   queryData: {
     handler: function() {
      //do something
     },
     deep: true
   }
}

The second solution: deep

The deep inside is set to true. In this way, if any attribute in this queryData is modified, the handler method will be executed. However, this is actually quite expensive, especially when the structure inside the object is too deep. And sometimes we want to care about a certain attribute in this object, such as name, which can be done at this time.

watch: {
   '': {
     handler: function() {
      //do something
     },
   }
}

The third solution: (computed+watch)

Or you can use the calculation properties in this way

computed: {
  getName: function() {
    return 
  }
}
watch: {
   getName: {
     handler: function() {
      //do something
     },
   }
}

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.