Vue: Is Vue performing unnecessary re-render when using $listeners?

[sqal]

Version

2.5.11 (and earlier versions)

Reproduction link

https://jsfiddle.net/xb4172g8/

Steps to reproduce

1. Open console and observe while typing something into input fields
2. Enter some text into name field -> Vue re-renders all three Textfield components
3. In line 21 replace { ...this.$listeners } with an empty object
4. Once again enter some text into any field -> Vue re-renders only updated Textfield

What is expected?

Vue should re-render only the component whose props has changed.

What is actually happening?

Using $listeners in component's render function causes the component to be rendered whenever its parent is updated even though his props hasn't changed.

[posva]

At the moment we always set $listeners when updating the parent, so yes, it triggers children updates if the use $listeners in the render function. Maybe this could be prevented by making sure the listeners have been updated before setting $listeners (https://github.com/vuejs/vue/blob/dev/src/core/instance/lifecycle.js#L243)

[yyx990803]

Unfortunately even if we do a shallowEqual check before setting $listeners, your specific example would still re-render because your @input listeners are created as a new anonymous function for each render, so technically they are different. This is similar to passing down a different anonymous function as prop on every render.

[cathrinevaage]

Has there been made any plans to implement such a check?

[trickstival]

Is there any workaround for this issue? I had to manually set up all listeners on a transparent wrapper, but it doesn't feel right. Actually, how is it going to work in Vue 3?

[houfeng0923]

is only resolve this problem like vuetify?