当前位置：首页 > VUE

vue事件实现原理

2026-01-16 21:40:02VUE

Vue 事件实现原理

Vue 的事件系统基于发布-订阅模式，通过 $on、$emit 等方法实现组件间通信。以下是核心实现原理的分解：

事件注册与存储

Vue 实例内部通过 _events 对象存储事件监听器。调用 $on(event, callback) 时，会将回调函数按事件名存入 _events：

// 简化版实现
Vue.prototype.$on = function (event, fn) {
  (this._events[event] || (this._events[event] = [])).push(fn);
};

事件触发

$emit(event, ...args) 会从 _events 中查找对应事件名的回调数组，并依次执行：

Vue.prototype.$emit = function (event, ...args) {
  const cbs = this._events[event];
  if (cbs) {
    cbs.forEach(fn => fn.apply(this, args));
  }
};

事件移除

$off(event, callback) 会从 _events 中移除指定事件的回调：

Vue.prototype.$off = function (event, fn) {
  if (!arguments.length) {
    this._events = Object.create(null);
    return;
  }
  const cbs = this._events[event];
  if (!cbs) return;
  if (!fn) {
    this._events[event] = null;
    return;
  }
  this._events[event] = cbs.filter(cb => cb !== fn);
};

自定义事件与原生事件

自定义事件：通过 $emit 和 $on 实现父子组件通信，例如 v-on:my-event 会被编译为 $on('my-event')。
原生 DOM 事件：通过 v-on 或 @ 绑定到模板时，Vue 会调用原生 addEventListener，并在组件销毁时自动解绑。

事件修饰符原理

例如 .stop 和 .prevent 等修饰符会在编译阶段转换为对应的原生事件操作：

// .stop 修饰符的实现逻辑
if (event.stopPropagation) event.stopPropagation();

性能优化

Vue 通过事件缓存机制（如 $once）和自动解绑（组件销毁时调用 $off）避免内存泄漏。

vue事件实现原理

标签: 原理事件

分享给朋友：

vue实现绑卡的原理

Vue 实现绑卡的原理 Vue 实现绑卡功能通常涉及前端表单处理、数据绑定、验证以及和后端 API 的交互。以下是实现绑卡功能的核心原理和步骤：数据绑定与表单处理 Vue 通过 v-model 指…

vue原理实现

Vue 原理实现的核心机制 Vue.js 的核心原理基于响应式系统、虚拟 DOM 和模板编译。以下是其核心实现机制的分解：响应式系统 Vue 使用 Object.defineProperty（Vu…

vue插件实现原理

Vue 插件实现原理 Vue 插件的核心是通过扩展 Vue 的功能，提供全局或实例级别的能力。插件可以添加全局方法、指令、混入（mixin）、组件等。插件的基本结构一个 Vue 插件通常是一个…

vue实现长按事件

实现长按事件的几种方法在Vue中实现长按事件可以通过多种方式完成，以下是几种常见的实现方法：使用原生事件监听通过@mousedown和@mouseup或@touchstart和@touche…

vue的实现原理

Vue 的实现原理 Vue 是一个渐进式 JavaScript 框架，其核心实现原理主要包括响应式系统、虚拟 DOM、模板编译和组件化机制。以下是 Vue 实现原理的关键部分：响应式系统 Vue…

vue数组实现原理

Vue 数组响应式原理 Vue 通过重写数组的原型方法来实现对数组变化的监听。Vue 没有直接监听数组的索引变化，而是通过拦截数组的变异方法（如 push、pop、splice 等）来触发视图更新。…

vue事件实现原理