CODEWITHSUNDEEP
javascriptvue.jsvuejs2
DMack
DMack

Reputation: 949

Is there a performance difference with anonymous Vue methods in the template?

If I have a Vue "single file component" in a .vue file, is there a performance difference between defining a method in the methods block:

methods: {
  // in this example, re-emit an input event to the parent
  onInput(val) {
    this.$emit('input', val);
  },
},

... and defining an anonymous function in the template?:

<some-input @input="(val) => $emit('input', val')" />

I'm hoping they end up as the same code when the .vue file gets built, but I'm curious to know if there's a practical difference. (If the anonymous function has to be re-defined when things change in the template, for example?)

I'm using Vue 2 with the options API, but I'd also love to know if the answer may be different in Vue 3.

Upvotes: 0

Views: 94

Answers (1)

kissu
kissu

Reputation: 46814

I know that anonymous functions are usually harder to debug in the stacktrace. Also, defining them in the template is ugly + may be annoying to refacto.

Performance-wise, I'm pretty sure the compiler is able to make it as performant as if you define it in methods, but I still recommend defining it in a single place and reference it.

It's more DRY and just feels right haha.

PS: sorry if I don't have more advanced knowledge here but in my opinion, it's a hardly noticeable performance (if any at all).

Upvotes: 1

Related Questions