In Vue 3, what is the difference between a method handler and an inline handler in v-on, and how does each receive the native event?
answer
- the compiler looks at the expression's shape
- identifier or property path
- a call wraps it in a function
- the special $event variable
basics
~20 sVue's template compiler treats a v-on value that is a name or property path (save, form.save) as a method handler, called with the native event. Anything else (save('draft'), count++) is an inline handler, where the event is available as $event.
solid answer
~40 s`v-on` (shorthand `@`) accepts either form, and the **template compiler decides which one you wrote** from the expression's shape. If the value is a valid identifier or property access path — `onSubmit`, `form.submit`, `handlers['submit']` — it is a **method handler**: Vue calls it with the native DOM `Event` as the first argument. An arrow or function expression is passed through the same way. Anything else — `submit('draft')`, `count++` — is an **inline handler**: Vue wraps the statement in a function whose parameter is `$event`, so you pass the event on with `submit('draft', $event)`, or write `(e) => submit('draft', e)`. A classic slip is `@click="save()"` when the method expects the event: the parentheses make it inline, and the event is never passed.
code
vue · 18 lines<script setup lang="ts">
import { ref } from 'vue'
const clicks = ref(0)
function logTarget(event: MouseEvent) {
console.log((event.target as HTMLElement).tagName)
}
function track(label: string, event: MouseEvent) {
console.log(label, event.clientX, event.clientY)
}
</script>
<template>
<button @click="logTarget">method handler</button>
<button @click="clicks++">inline statement: {{ clicks }}</button>
<button @click="track('cta', $event)">inline with $event</button>
<button @click="(e) => track('cta', e)">inline arrow</button>
</template>go deeper
Recall the two forms: a bare name gets the event, a call expression needs $event or an arrow parameter to pass it on.
Explain that the compiler classifies the value by its shape, and what wrapper it generates for inline statements.
Spot the save() versus save bug in review, and explain why handler caching and the single invoker make inline arrows cheap.
Set a team convention for handler style and for keeping DOM chores in modifiers, so methods stay testable data logic.
## Two ways to write a v-on value `v-on:click="…"` (shorthand `@click="…"`) attaches a native DOM listener to an element. The value between the quotes can take two forms, and Vue treats them differently: - A **method handler** names a function: `@click="close"`. - An **inline handler** is a JavaScript statement that runs when the event fires: `@click="count++"` or `@click="close('backdrop')"`. The distinction is made **at compile time**. The Vue guide spells out the rule: the compiler checks whether the value string is a valid JavaScript identifier or property access path. `foo`, `foo.bar` and `foo['bar']` are method handlers; `foo()` and `count++` are inline handlers. ## What the compiler produces | You write | Kind | What runs on the event | Event object | |---|---|---|---| | `@click="close"` | method | `close(event)` | first argument | | `@click="modal.close"` | method | `modal.close(event)` | first argument | | `@click="(e) => close('x', e)"` | function expression | the arrow, called with the event | `e` | | `@click="close('x')"` | inline | `$event => (close('x'))` | `$event`, unused here | | `@click="close('x', $event)"` | inline | `$event => (close('x', $event))` | passed on explicitly | | `@click="count++"` | inline | `$event => (count++)` | available as `$event` | Inside an inline handler, `$event` is simply the parameter name of the function Vue generates around your statement. It exists only in inline handlers; in a method handler you receive the event as a normal argument. ## A worked example A modal with a "Save as draft" and a "Publish" button, both routed to one function that needs the event. ```vue <script setup lang="ts"> function submit(mode: 'draft' | 'publish', event?: Event) { event?.preventDefault() console.log('submit as', mode) } </script> <template> <form @submit="(e) => submit('publish', e)"> <button type="submit">Publish</button> <button type="button" @click="submit('draft', $event)">Save as draft</button> </form> </template> ``` Both styles reach the same function with a mode and the event. The arrow form reads better when a handler needs a name for the event; `$event` is shorter in a one-liner. ## Mistakes interviewers listen for 1. **Calling instead of naming.** `@click="save()"` compiles to an inline handler, so `save` is called with **no** arguments. If `save(event)` expects the event, it gets `undefined`. Either drop the parentheses or pass `$event`. 2. **Expecting `$event` in a method.** In `function save($event) {}` the name is just a parameter name; there is nothing special about it outside a template inline handler. 3. **Doing DOM chores in data methods.** Writing `event.preventDefault()` or `event.stopPropagation()` inside every method mixes DOM details into data logic. The guide's answer is event modifiers — `@submit.prevent`, `@click.stop` — which keep methods about data. 4. **Assuming `this` matters.** In a `<script setup>` component handlers are plain functions from the setup scope; there is no `this`-binding concern of the kind `methods` in the Options API have. ## What happens at runtime A few details sit under the syntax: - For each event prop on an element (`onClick`, `onClickOnce`, …), Vue attaches **one** native listener (an "invoker") and on re-render only swaps the function it calls, instead of removing and re-adding listeners. - In compiled single-file components, inline handlers are usually **cached** by the compiler, so a new arrow is not created on every render; this also keeps child components receiving the same handler from re-rendering needlessly. - Errors thrown inside a native event handler are routed through Vue's error handling, so they reach `onErrorCaptured` hooks and `app.config.errorHandler` like other component errors. None of this changes how you write a handler, but it explains why inline arrows in templates are not the performance problem they are sometimes assumed to be.
- In Vue 3, why does @click="save()" leave a save(event) method with an undefined event?The parentheses make the value an inline statement, so Vue wraps it as `$event => (save())` and calls `save` with no arguments. Only a bare name or property path is treated as a method handler that receives the event. Write `@click="save"` or `@click="save($event)"`.
- Does an inline arrow handler in a Vue 3 single-file component create a new function on every render?Usually not. The SFC template compiler caches inline handlers, so the same function is reused across renders unless it references loop or slot scope variables. Vue also keeps one native listener per event and only swaps the function it calls, so re-renders do not re-register listeners.
saying these in an interview costs you the question
- @click="save()" passes the click event to save automatically.
- $event is available inside a method handler's body by that name.
- Vue decides method vs inline at runtime by checking whether the value is a function.
- Every re-render removes and re-adds the element's native listener.
- Inline handlers cannot access the native event at all.