fix: ensure tracking is paused when emit() calls handler so it can safely be called in effects (fix #6669)

[LinusBorg]

fix: #6669

If emit() is called in an effect (i.e. the callback of a watchEffect), it will collect any reactive values accessed in that parent handle as dependencies of the current component.

This can lead to a recursive loop crashing the app.

[edison1105]

I feel this PR is necessary though ##6669 is closed.

[LinusBorg]

@yyx990803 You closed #6669 as "not a bug", so I assume my PR can be closed?

[skirtles-code]

Just in case this does get merged, I think the same change would need to be applied to the onceHandler a bit further down.

---

As for whether it should be merged, I'm very much on the fence.

I think it's an easy problem for people to fall into without really understanding what's going on.

The exact timing of operations in Vue is not generally well understood by users. Various things are sensitive to timing and it usually 'just works' without needing to think about it.

I don't think it's necessarily obvious that emit runs code synchronously in the parent. I've encountered a lot of people who seem to think it's asynchronous. Why? Because the child emits an update event and the child's props don't synchronously update. They conclude that it's because the 'message' (event) is delivered asynchronously to the parent.

Even if someone isn't thinking about it in quite those terms, I still think events are perceived as somehow different from normal function calls, like throwing a parcel over a wall and not having to worry about what's on the other side.

But, I can also see Evan's perspective for closing the original issue.

---

Update: A few days after I posted this, we had another conversation about the synchronicity of emit on Vue Land. Link. On this occasion, two participants in the conversation believed that emit is not synchronous, Quote: emit is fired on the microtask. Perhaps this needs to be addressed more explicitly in the docs?