Skip to content

Unnecessary update cycles occurring only when content is passed to default slot #9380

Open
@jmcooper

Description

@jmcooper

Vue version

3.3.4

Link to minimal reproduction

https://stackblitz.com/edit/update-cycle-slots?file=src%2Fcomponents%2FFruitItem.vue,src%2FApp.vue

Steps to reproduce

The code example is written such that it has decent prop stability (i.e. modifying the selected prop only changes the props for the affected items, not all items in the list). To reproduce:

  1. Open the Stackblitz example
  2. Open the browser console
  3. Click on one of the fruits in the list
  4. Notice that it logged "updated" 4 times to the console (this is coming from the FruitItem component's onUpdated hook)
  5. Remove the "Remove Me" text from from <FruitItem ...>RemoveMe
  6. Click on one of the fruits, notice that it now, correctly only logs updated 2 times.

What is expected?

In a v-for list of items who have slot content, only the items whose props have actually changed should go through an update cycle.

What is actually happening?

All items in the list are going through a prop cycle, but only if the items have default slot content passed in.

System Info

Windows 11, Chrome 117.0.5938.150, Vue 3.3.4

Any additional comments?

This is likely causing unnecessary performance issues as additional, unnecessary render cycles are occurring.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions