Subscribe on changes!

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

avatar
Oct 11th 2023

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.

avatar
Oct 13th 2023
avatar
Oct 13th 2023

Shouldn't the compiler be able to recognize this as a stable slot instead of falling back on /* DYNAMIC */?

This appears to me like a compiler issue, not a reactivity issue.