Subscribe on changes!

Page being unresponsive after calling method inside of value of Ref

avatar
May 10th 2023

Vue version

3.2.47

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-zt6lqq

Steps to reproduce

Open Stackblitz reproduction sample, wait for page load (you will see 2 buttons and editor), then open DevTools to monitor console messages (you need to open DevTools and choose JavaScript context to see that messages, or you can just right-click inside preview frame and inspect one of the elements).

  • After load, first of all, try to click Save (Global) button. You will see a message in console with editor content.
  • Then, click Save (Proxy) button. After that, the page will stop responding to any actions within it, like it is running infinite loop.

What is expected?

Expected content output to console (in current scenario)

What is actually happening?

Page being unresponsive, like it is running infinite loop

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (4) x64 Intel(R) Core(TM) i5-4300U CPU @ 1.90GHz
    Memory: 1.12 GB / 3.70 GB
  Binaries:
    Node: 18.12.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - C:\Program Files\nodejs\yarn.CMD
    npm: 8.19.2 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 113.0.5672.92
    Edge: Spartan (44.19041.1266.0), Chromium (113.0.1774.35)
    Internet Explorer: 11.0.19041.1566
  npmPackages:
    vue: ^3.2.47 => 3.2.47

Any additional comments?

No response

avatar
May 11th 2023

Maybe you need shallowRef instead of ref

2023-05-11.09.42.32.mov

Yep, that fixes the issue. I don't know, is it really a bug in ref implementation or not, so i will wait for other members response. If someone from Vue core team feels, that it is not a bug - feel free to close this issue :)