Subscribe on changes!

When using event modifiers on a component it will always update unnecessarily (performance issue)

avatar
Aug 1st 2023

Vue version

3.3.4

Link to minimal reproduction

https://play.vuejs.org/#eNp9kk1P4zAQhv/KrC9JRTfZFTc2rRYQEnAAxIe4+FIl0xBwbMsfoSjKf2fstAEk6CXKzPs6eWb89uxY66zzyI5YYUvTaAcWnddLLptWK+OgB4NrGGBtVAsJWZNJOlWt3vazPBThS8k/LkslrYPW1rAIp9PkHIVQ8KiMqH4lMy7XXpauURK8TnEGPZcAeQ5XSumMy4HLIh9piIMKh60WK4dUARRPf5d9H78+DEVOVew2UnsH3e9WVSgWnJHO2ShFzv8v+FapV5l5TarXJBYRmjxFPv2BzZmzxL9u6uzZKkmLiXScleRtBJprHcgtZ0cjd9BWNN7rZew543G+65dPWL5803+2m9Dj7MagRdMhZ5PmVqZGN8pnd1e4ofdJpOm8IPce8RatEj4wjrYTLyvC/uSLtBfxDhtZ39uzjUNpd0MF0OAcop8zutOwpp9G/8A9zA7jObpA2uIuD/uSpeSDrmjr1fybkI0h8tFgt0H6Q9mZDqXpDBZLCD4lMBOqTrfurFsJjwcHM7LvS1LVdBSC8PyageEdl5EJeg==

Steps to reproduce

  1. Open the web developer console
  2. Focus on the input field
  3. Press keys

What is expected?

No console logs should be added as the Comp should not be updated.

What is actually happening?

Console.log messages are visible because on each keypress the Comp is updated.

System Info

No response

Any additional comments?

When @keydown is used rather than @keydown.up the Comp is not updated. It seems to be caused by using modifiers.