Native DOM events cause child component rerender, though props haven’t changed

[v-romanyuk]

Hi everyone!
I noticed some interesting behavior when Vue re-renders a component template when a native event fires, even if its props haven’t changed.

For example, I have a table component with a child row component that updates active row (activePerson variable) on click. If I attach a native click event to the row component, Vue re-renders its template even when isActive prop stays the same, onUpdated hook is also triggered.

However, if I define click as a custom emitted event (so it becomes a Vue event instead of a native one) inside the row component, the template does not re-render.

My theory is that since native events act like fall-through attributes, they might cause Vue to update a snapshot of the virtual DOM, triggering a re-render as a side effect.

I might be wrong so I’d really appreciate any insight into why this happens — or if there’s any documentation that explains this behavior (I couldn’t find anything relevant).

p.s I know this can be also fixed with v-memo, but I'm curios about the native events specifically.

Thanks!

Stackblitz
https://stackblitz.com/edit/vitejs-vite-kjvz4tn3?file=src%2Fcomponents%2FPeopleTable.vue

Behavior without emit

Behavior with emit

[absidue]

It's caused by the use of an inline event handler for a native event. Every time the parent re-renders a new function instance is created, which because of the fall-through behaviour triggers the re-rendering of the child component just like a prop change would.

You can workaround it by defining the handler in the <script> section instead of in the and using data attributes so you can identify which row triggered the handler with event.currentTarget.

[v-romanyuk]

That's what I'm thinking too, but is it mentioned anywhere in the Vue docs? It seems a bit implicit. I guess native handlers are heavily used for situations like this, since there's no reason to define click as an emit. Of course, v-memo fixes the issue, but it's still more of a workaround than a proper solution.

@yyx990803 @antfu would appreciate your thoughts on this. Thanks

[absidue]

Generally you should assume that anything you write in the <template> section will be evaluated on each render, the fact that Vue 3 caches some inline event handlers is more of a nice to have internal optimisation, rather than something you should expect to happen all the time. You keep saying it's not documented that Vue doesn't cache certain event handlers, it also isn't documented that it will cache any of them, the fact that it caches some of them is the implicit behaviour.

[v-romanyuk]

It seems we might be talking about slightly different things. I understand that a method call inside a template will always run whenever the component re-renders — that part makes sense. What I’m trying to figure out is why it re-renders at all, since the props don’t change and a re-render shouldn’t be triggered.

The only reason I can think of is the behavior around fallthrough attributes and native events, as you mentioned before. But since that’s not clearly documented, I’d like to find some proof or official explanation to confirm it. But anyways thanks for your replies.

[AndrewSparrowww]

@absidue https://vuejs.org/guide/best-practices/performance.html#props-stability

In Vue, a child component only updates when at least one of its received props has changed.

But in example above, child component rerenders, though their props were stable. How @click=toggleActivePerson added on child component can be a reason to rerender if props not changed.