v-on 的本质

在 Vue 中，v-on 指令用于监听 DOM 事件并执行相应的回调。它的本质是将事件监听器绑定到元素或组件，并在触发事件时调用指定的方法。v-on 的工作原理与 Vue 的响应式系统、虚拟 DOM 渲染机制和事件处理机制密切相关。要深入理解 v-on 的本质，我们需要从以下几个方面进行解析：

1. 编译过程与渲染函数

在 Vue 中，模板会被编译成渲染函数，这些渲染函数返回的是虚拟 DOM（VNode）。v-on 指令的本质是将事件绑定的逻辑编译为 addEventListener 事件监听器，并将事件处理函数与 Vue 实例的上下文关联。

假设我们有以下模板：

<button v-on:click="handleClick">Click me</button>

2. 编译为渲染函数

Vue 会将模板中的 v-on:click="handleClick" 转换成渲染函数中对应的事件绑定代码。它通过 JavaScript 语法动态地绑定事件监听器。在 Vue 3 中，这个编译过程的最终结果是一个 JavaScript 函数，它会通过 addEventListener 动态地为 click 事件注册事件处理函数。

编译后的渲染函数如下所示：

import { openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
function render(_ctx, _cache) {
  return (_openBlock(), _createElementBlock("button", {
    onClick: _cache[0] || (_cache[0] = (...args) => (_ctx.handleClick && _ctx.handleClick(...args)))
  }, "Click me"))
}

3 修饰符

Vue 允许在 v-on 上使用修饰符来改变事件的行为，例如 .stop、.prevent 等。

• .stop：调用 event.stopPropagation() 阻止事件冒泡。
• .prevent：调用 event.preventDefault() 阻止事件的默认行为。

<button @click.stop="handleClick">Click me</button>
<form @submit.prevent="handleSubmit">Submit</form>
<custom-button @click.native="handleClick">Click me</custom-button>

这些修饰符的实现本质上是通过在事件触发时在事件处理函数中插入相应的 event 方法调用来完成的。

const __sfc__ = {  };
import { withModifiers as _withModifiers, createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
function render(_ctx, _cache) {
  return (_openBlock(), _createElementBlock(_Fragment, null, [
    _createElementVNode("button", {
      onClick: _cache[0] || (_cache[0] = _withModifiers((...args) => (_ctx.handleClick && _ctx.handleClick(...args)), ["stop"]))
    }, "Click me"),
    _createElementVNode("form", {
      onSubmit: _cache[1] || (_cache[1] = _withModifiers((...args) => (_ctx.handleSubmit && _ctx.handleSubmit(...args)), ["prevent"]))
    }, "Submit", 32 /* NEED_HYDRATION */),
    _createElementVNode("custom-button", {
      onClick: _cache[2] || (_cache[2] = (...args) => (_ctx.handleClick && _ctx.handleClick(...args)))
    }, "Click me")
  ], 64 /* STABLE_FRAGMENT */))
}
__sfc__.render = render
__sfc__.__file = "src/App.vue"
export default __sfc__