vue event 源碼淺析

編譯

1、事件的編譯是通過processAttrs這個方法來處理的;
2、通過正則匹配元素綁定的事件類型、修飾符、對應的值;
3、addHandler 函數,根據 modifier 修飾符對事件名 name 做處理,處理普通事件和原生事件,對name 做歸類,返回處理後的AST;
4、根據 AST 元素節點上的 events 和 nativeEvents 生成 data 數據;

編譯流程圖如下

DOM 事件

1、DOM事件是對原生事件的處理,最終通過原生的addEventListener 和removeEventListener 來實現監聽和移除監聽;
2、updateListeners 的時候,會比較新舊事件回調的方法,如果存在只是改變引用,如果爲新添加,則add,如果移除事件則remove;

自定義事件

父子組件事件交互

1、通過修飾符 區分native 還是非native 事件,非native事件賦值給listeners,native 事件賦值給data.on;
2、data.on 事件的處理走上面原生DOM事件處理方式;
3、listeners 通過對子組件添加_parentListeners;
4、父組件通過updateListeners 的add move 來添加綁定事件,主要應用事件中心來實現;

事件中心

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章