Deep listening for data in Vue project or monitoring instance of object properties

As we all know, the monitoring of data in the vue project provides a good hook watch. Watch can easily monitor changes in the value of our commonly used data type, but usually when we want to monitor the change of the value of a certain attribute in an object, it is difficult to achieve the expected effect. According to vue's documentation, it is not difficult to find that using deep listening of data to achieve this effect. The specific implementation is as follows:

watch: {
  evlist: {
  handler(val, oldVal) {
    = ;
    = ;
    = ;
  },
  deep: true
  },
 
 },

Among them, evlist is an object, val monitors the changed value, and oldVal is the changed value.

Supplementary knowledge:Listening and computed properties in vue

Computed properties

Computed properties in vue are great things, it has both logic and variables. This allows us to no longer focus on the view layer, but only the value is to focus on the logic of the code. As for how the data is displayed, only Vue needs to be responsible for it and does not require our participation.

So if you are faced with the choice of whether to use a computed attribute or a monitoring attribute, you should prefer to select a computed attribute

  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

export default {
  data(){
   return { 
    message: 'Hello',
   }
  },
  computed: {
   reversedMessage: function () {
    return ('').reverse().join('');
   }
  }

You can see that the computed properties we use replace the function of expressions in the template. So, for any complex logic, you should use computed properties. Moreover, the computational properties make us only focus on logical implementation. As for the later data representation on the interface, it is directly responsible. Readers can see that we are not directly involved in the page display.

In addition, the traditional way of directly evaluating expressions requires us to take the value by ourselves, and the computed properties are cached based on their dependencies. They are re-evaluated only if the relevant dependencies change. That is to say, the computed attribute will take the value directly from the cache and change with the change of the value. The traditional way of directly evaluating expressions requires us to execute the getter() function before getting the value

Listening properties (watch)

The essence of the listening attribute is an asynchronous callback. I hope that readers will consider whether they can use computed attributes instead of the listening attribute before thinking about using the listening attribute.

Compare the same function implementation

//Calculate propertiescomputed: {
  fullName2: function () {
    return  + ' ' + 
  }
}
// Listening propertieswatch: {
   firstName: function (val) {
     = val + ' ' + 
  },
  lastName: function (val) {
     =  + ' ' + val
  }
} 

You can see that the code for computed attributes is simpler and more efficient, and in terms of implementation, it is obvious that computed attributes will be better.

The above examples of in-depth monitoring of data or monitoring object properties in Vue project are all the content I share with you. I hope you can give you a reference and I hope you can support me more.