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

[LinusBorg]

fix: #13338 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.

Summary by CodeRabbit

• Bug Fixes

  • Improved event handling to prevent unintended reactive tracking during event listener execution, reducing the risk of infinite loops or repeated triggers.

• Tests

  • Added a new test case to ensure event listeners do not cause unwanted reactive effects.

[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?

[coderabbitai[bot]]

Walkthrough

The changes introduce reactivity tracking control in the Vue emit function by pausing and resetting tracking around event handler invocations. A new test verifies that emitting events inside a reactive effect does not cause infinite loops or repeated triggers due to unintended dependency tracking during event listener execution.

Changes

File(s)	Change Summary
packages/runtime-core/__tests__/componentEmits.spec.ts	Added a test ensuring no reactive tracking occurs during event listener execution to prevent loops.
packages/runtime-core/src/componentEmits.ts	Wrapped event handler invocation in pauseTracking() and resetTracking() to control reactivity.

Sequence Diagram(s)

sequenceDiagram
    participant Component
    participant EmitFunction
    participant EventHandler
    participant Reactivity

    Component->>EmitFunction: emit('event', ...)
    EmitFunction->>Reactivity: pauseTracking()
    EmitFunction->>EventHandler: callWithAsyncErrorHandling()
    EventHandler-->>EmitFunction: (event handled)
    EmitFunction->>Reactivity: resetTracking()
    EmitFunction-->>Component: (done)

Assessment against linked issues

Objective	Addressed	Explanation
Prevent watchEffect from collecting dependencies on emits and causing infinite/reactive loops (#13338, #6669)	✅

Poem

A bunny hopped through code so neat,
Ensuring emits and effects don’t repeat.
With tracking paused and bugs at bay,
Reactive loops are kept away.
Now tests confirm the fix is right—
No more infinite loops in sight!
🐇✨

✨ Finishing Touches

• [ ] 📝 Generate Docstrings

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Explain this complex logic.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai explain this code block.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and explain its main purpose.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR.
• @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.