Setting template ref function handler with v-for and inline event handler (while passing element from v-for) causes ref to recall its handler every rerender about core

[jh-leong]

@LinusBorg okay, but why does @click="btnClick(n)" causes all refs to set again, but @click="btnClick(1)" doesn't? In both cases there are state changes

This is a performance optimization. When using @click="btnClick(1)", the button vnode is static because it doesn't use any other state. Vue skips these static nodes during the patch update, only updating dynamicChildren (source).

Ref updates occur within the patch logic (source), so this won't cause the ref to be set again.

Hope this helps :)

[LinusBorg]

That's expected behaviour. Any state. change will update the whole template, and in that process, all refs are set again.

You can use v-memo to optimize update behaviour in v-for loops.

And you can use lifecycle hooks to reset the array in beforeUpdate

[eugritz]

@LinusBorg okay, but why does @click="btnClick(n)" causes all refs to set again, but @click="btnClick(1)" doesn't? In both cases there are state changes