Page being unresponsive after calling method inside of value of Ref
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
Maybe you need shallowRef
instead of ref
https://github.com/vuejs/core/assets/56526981/f14449d2-bc43-4d9c-8385-d5cbcffb4b1c