Unnecessary update cycles occurring only when content is passed to default slot
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:
- Open the Stackblitz example
- Open the browser console
- Click on one of the fruits in the list
- Notice that it logged "updated" 4 times to the console (this is coming from the FruitItem component's onUpdated hook)
- Remove the "Remove Me" text from from <FruitItem ...>RemoveMe
- 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.
Could be solved by https://github.com/vuejs/core/pull/5912