babel-plugin-jsx icon indicating copy to clipboard operation
babel-plugin-jsx copied to clipboard

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

Open yuwu9145 opened this issue 8 months ago • 10 comments

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

yuwu9145 avatar May 31 '24 11:05 yuwu9145