defineModel is Synchronous or Asynchronous ?

[poe1599]

I often encounter the issue of emits outputting the old value when modifying props through defineModel. In this test, I've observed defineModel exhibiting both asynchronous and synchronous behavior.

Sometimes, when the parent component receives the emits and then accesses the ref value, it also gets the old value.

If I want my child component to ensure that the parent component's ref value is the new value after emitting, how should I write the code?

https://play.vuejs.org/#eNqNVNGOmzAQ/JWVVcmcmoJK+xQl0bVRHq5S76r23uqqR8km4c4YBCaNhPj3rm1IIJegPsX2jNczy05q9inP/X2FbMpmZVwkuYYSdZUvhErSPCs0LHeJXMOmyFLgfhCbnbnAj4QaCtxA01IcJFScqVKDxoN+D3PD8Pg9vzkhmVruIrXFx5bh4Q3MF1ALBWAYmURfZlvvyZaYwpvaLvx9JCtsnqjSGQ8NxyHNUEDYCbj2viGMvh9274f/+/4scN2kPtJGY5rLSCPtAGauo2YJsH+XZmuUU2tuLpj9FewCGrZoeERv41MHCRx09BLJVBjYFsxxFrPAaiJ5s6CnlU2YLsnkJtn6z2WmaEhsfwSLszRPJBYPuU6oCYJNXecMFkmZ/f1iz3RR4aQ7j3cYv1w4fy4P5kywbwWWWOxRsCOmo2KL2sGrH/ckugdSbypJ7BHwO9IHqoxGR/tcqTXJ7vGs2js7yYnaPparg0ZVdqaMUMNsLF8wmu7liPWT3A/+R3uPhoG6eEzN9ZjVsMZNovCr+eBX0oRpokuaVcdcmZ33k/emgE+gtw35r97A/+6y2HvH4/aQT2o6jCqpp8B5M0yJTOIXk49TPFwllwRCBtu3wB9I8Vk2HMUEpE9uU2RdeWc2+rxhoi1iEvvKR0j3jkbOfdypvNJDH68l2py71bhE81Sf10kci/2fSutMUSBNR10UzUowCwPUdeu6oVLED9yF9nIBgVsl1kj7z0BlnAzK+61FbGFrlo7MlWGim39DDADw

[jacekkarczmarczyk]

https://github.com/vuejs/core/issues?q=is%3Aissue%20state%3Aclosed%20defineModel%20nextTick

[poe1599]

I've already tried using nextTick, but in my development scenario, this might cause other related issues. Later, I referred to other discussions and tried switching back to using useVModel.

[skirtles-code]

For more explanation of why the text1 example behaves that way, see:

• https://vue-land.github.io/faq/emit-synchronous

While text2 might appear to behave differently, that's just because you're checking the value later. The underlying mechanism is the same. The v-model on the <input> is using an input event to update the model, so when an input event occurs:

• The input listener for the v-model triggers first, attempting to assign a new value to _text2.value.
• An event is emitted by the child component.
• The parent updates the text2 ref.
• A rendering task is queued using a microtask.
• The microtask runs rendering, updating the props, which updates the value of _text2.value in the child.
• The first input listener is done, so the browser moves on to the next listener. That's the input listener added via @input on the <input>.

The key thing to note is that microtasks queued by a listener for a DOM event will run before other listeners for the same event. For text2 there are two listeners and the rendering microtask can run between them, whereas for text1 there's just a single listener, so the microtask doesn't run until after everything else is done.

Sometimes, when the parent component receives the emits and then accesses the ref value, it also gets the old value.

Are you able to provide a reproduction for this, as it doesn't seem to be happening in the Playground you shared.

I'm unclear what the constraints are for your real use case, but here's a Playground that dodges the problems in your original example:

• Playground