When JSX is used, v-slots cause child component does unnecessary rendering during parent component re-rendering

[yuwu9145]

Vue version

3.4.21

Link to minimal reproduction

https://github.com/yuwu9145/vue-jsx-slot-demo

Steps to reproduce

1. Load and run the project
2. Type something in the input to trigger parent App component render function
3. Check console logs
4. Then go to src/App.tsx and comment out line 20
5. Type something again
6. Check console logs again, see the different results

What is expected?

Only parent App component's onUpdated hook should be triggered, child Test component should not be re-rendered as nothing is changed to trigger child Test render function

What is actually happening?

Both parent App and child Test components are re-rendered

System Info

System:
    OS: macOS 14.2.1
    CPU: (8) arm64 Apple M1 Pro
    Memory: 114.45 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.19.0 - ~/.nvm/versions/node/v18.19.0/bin/node
    Yarn: 1.19.0 - ~/.nvm/versions/node/v18.19.0/bin/yarn
    npm: 10.2.3 - ~/.nvm/versions/node/v18.19.0/bin/npm
  Browsers:
    Chrome: 125.0.6422.141
    Firefox: 124.0.2
    Safari: 17.2.1
  npmPackages:
    vue: ^3.4.27 => 3.4.21

Any additional comments?

No response

[uke5tar]

Hi folks,
Is there an expected timeline for resolving this issue? I am waiting eagerly for a fix here because it affects the linked rendering of VTreeview in Vuetify quite significantly. No intend to pressure - just curious as it would affect my planning in a work-around. Thank you!

[TheInvoker]

+1 same for me, same boat

[angrymarker]

this is the last item I need updated to convert my project from vue2 to vue3, would love an ETA

[Zheng-Changfu]

Is there an expected repair time? I think this has a great impact on performance

[Zheng-Changfu]

Setting $stable to true in v-slots prevents updates for subcomponents，I'm looking at this issue：#525

[Zheng-Changfu]

v-slots={{
$stable:true
}}

[yuwu9145]

$stable:true resolves our performance issue, what's the official way of using it?

[Zheng-Changfu]

$stable:true解决了我们的性能问题，官方的使用方法是什么？

jsx 目前没有做这种编译处理， vue slot 有3种类型，stable、dynamic、forward，template 语法会在编译过程中根据上下文自动编译出插槽类型，从而在更新判断中做优化处理，而 jsx 没有做这种处理，所以会强制更新

vue 更新判断源码
vue slot types
vue 目前没办法做到插槽的依赖收集

[Zheng-Changfu]

$stable:true解决了我们的性能问题，官方的使用方法是什么？

jsx 目前没有做这种编译处理， vue slot 有3种类型，stable、dynamic、forward，template 语法会在编译过程中根据上下文自动编译出插槽类型，从而在更新判断中做优化处理，而 jsx 没有做这种处理，所以会强制更新

vue 更新判断源码 vue slot types vue 目前没办法做到插槽的依赖收集

stable 才会在更新过程中做优化，dynamic 会强制更新，forward 会根据运行时的行为决定

[mxcabre]

Any updates ?