Subscribe on changes!

ref function is called even though DOM node does not change

avatar
Jul 8th 2021

Version

3.1.4

Reproduction link

https://sfc.vuejs.org/ playground

Steps to reproduce

open console and hit the button a few times

What is expected?

setRef to be called only when element is mounted/unmounted

What is actually happening?

setRef is called each time an update happens, even though the ref function is static and DOM element does not change. I may be wrong here but thought it should work like React's function ref, but maybe it works differently in Vue. If so and this is not a bug, then sorry for asking, and please close the issue. Thanks 👍

avatar
Jul 9th 2021

This is expected, setRef will execute on each time patch and unmount.

avatar
Jul 9th 2021

It's currently implemented this way intentionally, yes I wonder if we can optimize it though. We should be able to compare the ref value for the old and vnode and skip the operation if they have the same value.

Edit: That's colliding a bit with the pattern of using a ref function on a v-for element, were we recommend resetting an array of template refs onBeforeUpdate so it can be re-populated during rendering ...

Still, might be something to look into more thoroughly.

avatar
Jul 9th 2021

This is intended behavior. The cost of setting a ref with the same value is negligible and it enables the pattern of constructing fresh ref lists on each render.