Subscribe on changes!

Using template refs makes root component rerender

avatar
Jul 6th 2023

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.