vue click 实现原理

Vue 中 @click 的实现原理

Vue 的 @click 指令本质上是基于原生 DOM 事件机制的封装，通过 Vue 的模板编译和事件系统实现。以下是其核心实现原理：

模板编译阶段

Vue 模板中的 @click 会被编译为渲染函数中的 on 属性。例如：

<button @click="handleClick">Click</button>

编译后的渲染函数类似：

createElement('button', {
  on: {
    click: handleClick
  }
})

事件绑定阶段

Vue 在虚拟 DOM 渲染为真实 DOM 时，会通过原生 addEventListener 绑定事件。事件处理函数被包裹在 Vue 的内部函数中，确保触发时能正确执行组件实例的对应方法。

事件修饰符处理

Vue 提供了 .stop、.prevent 等修饰符，这些修饰符会在编译阶段被解析为对应的原生事件操作：

• .stop 调用 event.stopPropagation()
• .prevent 调用 event.preventDefault()
• .native 绑定到组件根元素的原生事件

自定义事件与原生事件的区别

• 组件上的 @click 默认是自定义事件，需通过 $emit 触发。
• 添加 .native 修饰符后，会绑定到组件的根元素的原生 click 事件。

示例代码解析

// 编译后的渲染函数
function render() {
  with(this) {
    return _c('button', {
      on: {
        click: function($event) {
          handleClick($event)
        }
      }
    }, [_v("Click")])
  }
}

• _c 是 Vue 的 createElement 函数。
• $event 是 Vue 封装后的事件对象，与原生的 event 对象一致。