1、Vue中事件绑定的原理

Vue 的事件绑定分为两种：

一种是原生的事件绑定

<div @click="fn()"></div>

另一种是组件的事件绑定

<my-component @click.native="fn" @click="fn1"></my- component>

理解:

1.原生 dom 事件的绑定，采用的是 addEventListener 实现
2.组件绑定事件采用的是 $on 方法

原理:

事件的编译：

let compiler = require('vue-template-compiler'); //vue-loader
let r1 = compiler.compile('<div @click="fn()"></div>'); 
let r2 = compiler.compile('<my-component @click.native="fn" @click="fn1"></my- component>'); console.log(r1); 
// {on:{click}} console.log(r2); 
// {nativeOn:{click},on:{click}}

两者编译出来不一样

前者

with (this){return _c('div',{on:{"click":function($event){return fn()}}})}

后者

with (this){return _c('my-component',{on:{"click":fn1},nativeOn:{"click":function($event){return fn($event)}}})}

1.1 原生 dom 的绑定

• Vue 在创建真是 dom 时会调用 createElm ,默认会调用 invokeCreateHooks
• 会遍历当前平台下相对的属性处理代码,其中就有 updateDOMListeners 方法,内部会传入 add 方法

源码：

function updateDOMListeners (oldVnode: VNodeWithData, vnode: VNodeWithData) { 
	if (isUndef(oldVnode.data.on) && isUndef(vnode.data.on)) { return }
	const on = vnode.data.on || {} const oldOn = oldVnode.data.on || {} 
	target = vnode.elm 
	normalizeEvents(on) 
	updateListeners(on, oldOn, add, remove, createOnceHandler, vnode.context) 
	target = undefined 
}
function add ( 
	name: string, 
	handler: Function, 
	capture: boolean, 
	passive: boolean 
) {
	target.addEventListener( // 给当前的dom添加事件 
		name, 
		handler, 
		supportsPassive 
		? {  capture, passive  } 
		: capture 
	) 
}

vue 中绑定事件是直接绑定给真实 dom 元素的

1.2 组件中绑定事件

export function updateComponentListeners ( 
	vm: Component, 
	listeners: Object, 
	oldListeners: ?Object 
) {
	target = vm updateListeners(
		listeners, oldListeners || {}, 
		add, 
		remove,
		createOnceHandler, vm)
		target = undefined 
	}
function add (event, fn) { 
	target.$on(event, fn) 
}

组件绑定事件是通过 vue 中自定义的 $on 方法来实现的