`beforeUpdated` directive hook is called as a reactive effect, which is unexpected
Version
3.0.11
Reproduction link
https://codepen.io/liquid-solid/pen/LYxoKEN
Steps to reproduce
- Open repro link
- Open console
- Click somewhere on bordered element
- Watch console logs
What is expected?
It is expected that if a callback modifies some reactive data that does not affect rendering, it should be called once.
What is actually happening?
Actually, callback falls into recursive reactive effect loop. Also, in the local dev server (via vite) appears vue message "Error: Maximum recursive updates exceeded..."
Everything works fine with updated
hook.
Context of my bug - i need to update reactive info about element scrollTop/scrollHeight/offsetHeight, which not directly affects render function, and i tried to update it in the beforeUpdated
directive hook.