What happens when the method of vue modifies the data property?

< H2 > problems found when using vue to manage data < / H2 >

situation

because I find it troublesome to manage the open&close status of multiple modal boxes on the same page, I want to encapsulate a method for managing the status values of each modal box, as follows
toggleStatus(obj, key) {
      // eslint-disable-next-line no-param-reassign
      obj[key] = !obj[key];
      console.log(this.status);
    }

the calling method is

@click="toggleStatus(status,"showBeastsModal")"

but in use, it is found that there is a certain delay in this writing, and there is no rough

.
@click="status.showBeastsModal=false)"

react quickly, I don"t know why

Mar.16,2022

the syntax in the two comparisons is not exactly the same. The above way of writing is to read the value of the object first, and then to set the value of the object; the following is to set the value of the object directly. So the speed below will be a little faster. Object accessors take up a certain amount of performance consumption.
one of the reasons for the higher performance below should not be because event handling is written directly on dom, because it is only a syntax sugar and will eventually be converted to the same form.

Menu