Version

3.0.5

Reproduction link

https://kasheftin.github.io/vue3-event-argument-rerender-issue/

Steps to reproduce

• Click on Randomize button
• Notice (in console) that <Dummy> component updated hook was triggered

What is expected?

Randomizing items order should not trigger <Dummy> component to re-render.

What is actually happening?

Every time Randomize button is pressed each component triggers updated hook.

The code is:

    <Dummy 
      v-for="id in ids"
      :key="id"
      :id="id"
      @dummy-event="dummyEventHandler(id)"
    />

The reason of the issue is the reference to id in @dummy-event handler. It works correctly if replaced with @dummy-event="dummyEventHandler($event)" or just @dummy-event="dummyEventHandler".

Source code: https://github.com/Kasheftin/vue3-event-argument-rerender-issue

This is expected, when you refer to a scope variable in an event handler, it cannot be cached, which means that every update will create a new event function, which will cause the component to update.

Is it documented? It looks like a breaking change comparing to vue2 behavior. I found it occasionally while preparing this article, https://codeburst.io/5-vue-performance-tips-98e184338439.

You can add the emits options in Dummy.vue to avoid this:

<template>
  <div>
    {{ id }}
  </div>
</template>

<script>
export default {
  emits: ["dummy-event"],
  props: {
    id: {
      type: Number,
      required: true,
    },
  },
  updated() {
    console.log("Dummy updated");
  },
};
</script>