vuejs / core

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
https://vuejs.org/
MIT License
47.36k stars 8.28k forks source link

Using template refs makes root component rerender #8733

Open sawmurai opened 1 year ago

sawmurai commented 1 year ago

Vue version

3.3.4

Link to minimal reproduction

https://play.vuejs.org/#eNqVVU1zmzAQ/SuqLsYzNnSSnqiTps340B7aTNqblQOBta1ESIwkiGcY/ntXEmDsNv3wwUK7j7cfWj1a+rGq4qYGmtKVyTWvLBGZ3F0xag2j10zyslLakpbsF6SALZdwq9AkQdoF0bAlHdlqVZIZksxGuMMEO6Nx4nYuCKPvmWQSDh6DbFkt/DpljVomCTFg6yqaE78hJFfSWGL26mVdcEuuXORomwkDc095xFi12wnoUdE8JY3iBbm6HpiQumeJm0zUgKg3pxYkdLBuJNaYi5ZI5mnIwOPiKQGxULuI0XvQIAvQBBvKqMsqoIa1J9lHs4I3swXZDA7ibDI7s3nrY22tkuholbwVPH9OJ+V1iEeMqTI5my/IzJe8PmRlJWD2MF8cuU42cRxHZx344IlCWp5GaYJh5w8kJZuTl0fYPnLnNT/6HoaKO7fgX+cMqyTMFM4RoQsahmNZZlX8ZJTEmfOHwnoHDlw6HBOjfl5SfNhbW5k0SfJC4msFCN7oWIJNZFUmNwhLdC0tL2FZqPLmMr6M3yUFN3ZqjsGUy0etXgxoJGG0T9yHSdDYgF6GAwT9r2HPXpuGPnP9En5oEjbFGhykLd+dtSTH/nIB+ltlOQ7aSWsyIdTLF2+zuoaxlnwP+fNv7E/mEGq60+Azm9RvM70DG9zr71/hgM+js1RFLfpjeMV5D3gJapdjgH2qZYFpT3A+28/+hLnc/TDrgwVphqJcor4bHu/Pw43Wa6Uf08VuT7o4SMxEx7yETBXsXK1wQCdyddF7glxdODKHYDLoCrdQml54Ni2XEnRK3i7wFr62wSvhbn8gmApFriGz4IMGpZhcE9xgoEogwF0a/K1CcqlPAHXZr4wm6F4lI7ZvgU/7P3swVFhpVbkKgx7fuV20GeP5C95LbB/0HrlCQ4II/6HOi78UukJZGep1iuZY3TfoGIlR0iy3SvcdIFyGI8GPVNu6p9h3vuswBhL47gTS0z51PwGWu0fM

Steps to reproduce

  1. Open the devtools to see the log
  2. Click the "Edit Example" button
  3. See that you have two times the log message for "Rerender App"

What is expected?

The root app is rerendered once

What is actually happening?

The root app is rerenderd twice

System Info

System:
    OS: macOS 13.4
    CPU: (10) arm64 Apple M1 Pro
    Memory: 332.44 MB / 32.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 18.13.0 - ~/.nvm/versions/node/v18.13.0/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 8.19.2 - /opt/homebrew/bin/npm
    pnpm: 8.3.1 - /opt/homebrew/bin/pnpm
  Browsers:
    Chrome: 114.0.5735.198
    Safari: 16.5

Any additional comments?

When you edit Comp2.vue and remove the template ref, the rerender of the root-app does not happen anymore.

yangliguo7 commented 1 year ago

The second function ( console.log("Rerender App"); ) execution is because unmount was executed during patch.

u can set a unique key to avoid it .

https://play.vuejs.org/#eNqVVU1z0zAQ/StClzgzic20nExaCp0c4ACdwi3qwbU3iVpZMpLshvH4v7OS7MQJhI8eamv3+e2nXlr6vqripgaa0oXJNa8sEZncXDFqDaPXTPKyUtqSlmxnpIA1l3Cr0CRB2hnRsCYdWWtVkgmSTPZwhwl2RuPEnVwQRt8yySTsPAbZslr455g1apkkxICtq2hK/IGQXEljidmql2XBLblykaN1JgxMPeUBY9VmI6BHRdOUNIoX5Op6YELqniVuMlEDol4dW5DQwbo9scZctEQyT0MGHhdPCYiF2kSM3oMGWYAm2FBGXVYBNTx7km00KXgzmZHV4CDOJrMTm7c+1tYqiY5WyVvB8+d0VF6HeMSYKpOT6YxMfMnLXVZWAiYP09mB6+gQx3F00oF3niik5WmUJhh2+kBSsjr6eIC1z/AjZbSW/LubKqayjdwApwfww9CCzj3wX+cMiyQsGS4WoTMatmVeZlX8ZJTEJfRTYr0DNzAd5saoX6AUX7bWViZNkryQ+FkBgjc6lmATWZXJDcISXUvLS5gXqry5jC/jN0nBjR2bYzDl/FGrFwMaSRjtE/dhEjQ2oOdhoqD/NezJZ+PQJ65fwg9NwqZYg5u15puTluTYXy5Af6ksx807ak0mhHr55G1W17CvJd9C/vwb+5PZhZruNPjMRvXbTG/ABvfy62fY4fveWaqiFv0YzjjvAW9F7XIMsA+1LDDtEc5n+9FPmMvNN7PcWZBmKMol6rvh8X4ebrXOlX5IF7s96uKgOSNh85oylrRT+cIFHenXRe8J+nXhyByCySA03EJpeiVatVxK0Cl5PcO7cO6AV8LJQSAYK0euIbPggwbpGF0TPGCgSiDAXRr8W4TkUp8ACrV/Mpqge5HssX0LfNr/2YOhwkqrylUYBPrOnaLVPp6/4L3m9kHvkSs0JKjyH+q8+EuhC9SZoV4ncY7V/SgdIjFKmvla6b4DhMswEvzValv3FvvOdx3GQALfnUB63KfuJ+gZTgY=