Order of execution for events?

[slbayer]

So is there an order of execution guaranteed for events on a single component?

I have a component which uses v-model. In addition to updating the value, I also want to do something when the model changes, so I have this:

<my-component v-model="thisValue" @update:model-value="doSomething()"/>

I understand that I could also not use v-model and pass :model-value and then update thisValue in doSomething(), but the paradigm shown worked fine in the Vue 2 equivalent.

I discovered, today, that the following behaves differently:

<my-component @update:model-value="doSomething()" v-model="thisValue"/>

Namely, in this case, doSomething() is called before thisValue is updated, and in the first case, it's the other way around. In other words, it appears that the events associated with the component are executed in the order of the attributes they're defined as.

Is this something I can rely on? Is this guaranteed anywhere? I've looked through the docs and searched the Web and I can find nothing that says anything about it one way or another.

[jh-leong]

Thanks for raising this interesting observation! After investigating, here's what I found:

1. ​Order Stability: The execution order of events follows their definition order in the template. This behavior comes from:

   • The compiler preserves attribute order during parsing
   • Events are compiled to an array maintaining this order: Playground (visible in the playground's JS tab)
   • The runtime executes handlers in array order

2. ​Implementation Status:

   • This behavior has been stable for years
   • While not explicitly documented, it's implicitly guaranteed by the consistent implementation
   • No known plans to change this behavior

3. ​Recommendations:

   • Generally safe to rely on this order
   • For critical cases:
     • Consider watchers
     • Consolidate logic in a single handler
     • Documenting the order dependency in your code

[slbayer]

Thank you for this thoughtful, detailed answer.

P.S. I have considered watchers, and in some of these cases I've migrated to them, but in others the behavior is linked to an element in a v-for loop and, as far as I can tell, you can't watch things like that.