vue事件簡介

vue事件有兩種：dom事件和自定義事件，前者使用在dom元素上，可以使用v-on或@來監聽事件，自定義事件用于組件上，方便組件間的通信,如果在組件上使用原生事件，需要加 .native 修飾符，下面我們從源碼分析下vue事件運行的原理

事件的編譯

//在節點編譯過程中會執行processattrs function processAttrs (el) {const list = el.attrsListlet i, l, name, rawName, value, modifiers, syncGen, isDynamicfor (i = 0, l = list.length; i < l; i++) {name = rawName = list[i].namevalue = list[i].valueif (dirRE.test(name)) {// mark element as dynamicel.hasBindings = true// modifiers//parseModifiers方法會對有修飾符的屬性，進行處理，得到modifiermodifiers = parseModifiers(name.replace(dirRE, ''))// support .foo shorthand syntax for the .prop modifier//解析事件指令，對name中'v-on'字段檢測，滿足的話把這個字段也去掉，name就變成click，調用addHandler。//addHandler，給AST節點添加event屬性，并根據modifer解析出來的標記給name上打標記if (process.env.VBIND_PROP_SHORTHAND && propBindRE.test(name)) {(modifiers || (modifiers = {})).prop = truename = `.` + name.slice(1).replace(modifierRE, '')//如果有modifer，把name中modifer相關字段去掉} else if (modifiers) {name = name.replace(modifierRE, '')}...addHandler(el, name, value, modifiers, false, warn, list[i], isDynamic)...} } 復制代碼

addHandler 根據modifer.native判斷原生事件還是普通事件。接下來構造event對象，如果有 .native ，構造nativeEvents對象，否則構造events對象。按照name對事件做歸類，并把回調函數的字符串保留到對應的事件中

function addHandler (el,name,value,modifiers,important,warn,range,dynamic) {... //根據modifer.native判斷原生事件還是普通事件,主要是生成events或nativeEvents屬性var events;if (modifiers.native) {delete modifiers.native;events = el.nativeEvents || (el.nativeEvents = {});} else {events = el.events || (el.events = {});}...el.plain = false;} 復制代碼

genData函數中根據AST元素節點上的events和nativeEvents生成data數據,genHandlers 根據isNative判斷res的值為'nativeOn'/ 'on'。遍歷events對象，拼接genHandler會生成handler的代碼，拼接出一個JSON代碼對象。

{on: {"select": selectHandler},nativeOn: {"click": function($event) {$event.preventDefault();return clickHandler($event)}} } 復制代碼

事件的運行

dom事件

dom事件的添加和移除，實際上就是調用原生 addEventListener 和 removeEventListener

function add (name: string,handler: Function,capture: boolean,passive: boolean ) {...target.addEventListener(name,handler,supportsPassive? { capture, passive }: capture) }function remove (name: string,handler: Function,capture: boolean,_target?: HTMLElement ) {(_target || target).removeEventListener(name,handler._wrapper || handler,capture) } 復制代碼

自定義事件

對于自定義事件和原生 DOM 事件處理的差異就在事件添加和刪除的實現上，自定義事件 add 和 remove 的實現

var target; //添加事件是在里面調用來$on方法來實現 function add (event, fn) {target.$on(event, fn); } //移除事件是在里面調用來$off方法來實現 function remove$1 (event, fn) {target.$off(event, fn); } 復制代碼

自組件觸發自定義事件時，回掉函數是在父組件內執行的。

//createComponent。在創建組件vnode之前，會對事件做處理， //會把data.on(自定義事件)賦值給listeners，listeners在組件實例化成VNode時會作為參數傳入 //拿到 listeners 后，執行 updateComponentListeners(vm, listeners) 方法： export function createComponent (Ctor: Class<Component> | Function | Object | void,data: ?VNodeData,context: Component,children: ?Array<VNode>,tag?: string ): VNode | Array<VNode> | void {if (isUndef(Ctor)) {return}const baseCtor = context.$options._base// plain options object: turn it into a constructorif (isObject(Ctor)) {Ctor = baseCtor.extend(Ctor)}...//它把 data.on 賦值給了 listeners，把 data.nativeOn賦值給了 data.on，這樣在組件上也可以定義原生事件，const listeners = data.on// replace with listeners with .native modifier// so it gets processed during parent component patch.data.on = data.nativeOn...return vnode } 復制代碼

Vue為我們提供了四個自定義事件API，分別是$on，$once，$off，$emit

on事件

function eventsMixin (Vue) {var hookRE = /^hook:/;//$on方法用來在vm實例上監聽一個自定義事件，該事件可用$emit觸發。//當執行 vm.$on(event,fn) 的時候，按事件的名稱 event //把回調函數 fn 存儲起來 vm._events[event].push(fn)。Vue.prototype.$on = function (event, fn) {var vm = this;if (Array.isArray(event)) {for (var i = 0, l = event.length; i < l; i++) {vm.$on(event[i], fn);}} else {(vm._events[event] || (vm._events[event] = [])).push(fn);// optimize hook:event cost by using a boolean flag marked at registration// instead of a hash lookupif (hookRE.test(event)) {vm._hasHookEvent = true;}}return vm}; 復制代碼

once事件

//vm.$once執行的時候，內部就是執行 vm.$on //并且當回調函數執行一次后再通過 vm.$off 移除事件的回調，這樣就確保了回調函數只執行一次 Vue.prototype.$once = function (event, fn) {var vm = this;function on () {vm.$off(event, on);fn.apply(vm, arguments);}on.fn = fn;vm.$on(event, on);return vm }; 復制代碼

off事件

//當執行 vm.$off(event,fn) 的時候會移除指定事件名 event 和指定的 fn ，根據傳入的參數移除相應的監聽事件，Vue.prototype.$off = function (event, fn) {var vm = this;// allif (!arguments.length) {vm._events = Object.create(null);return vm}// array of eventsif (Array.isArray(event)) {for (var i$1 = 0, l = event.length; i$1 < l; i$1++) {vm.$off(event[i$1], fn);}return vm}... 復制代碼

emit事件

//執行 vm.$emit的時候，根據事件名 event 找到所有的回調函數 //let cbs = vm._events[event]，然后遍歷執行所有的回調函數,根據相應的事件名 //執行不同的回掉函數Vue.prototype.$emit = function (event) {var vm = this;···return vm}; } 復制代碼

總結

以上是生活随笔為你收集整理的Vue事件源码分析的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。