【Vue原理】Event - 白話版

寫文章不容易，點個讚唄兄弟
專一 Vue 源碼分享，文章分爲白話版和 源碼版，白話版助於理解工做原理，源碼版助於瞭解內部詳情，讓咱們一塊兒學習吧
研究基於 Vue版本 【2.5.17】

若是你以爲排版難看，請點擊 下面連接 或者 拉到 下面關注公衆號也能夠吧

【Vue原理】Event - 白話版

Vue 事件是我最感興趣的東西之一，一直想研究玩玩

特別是組件自定義事件，很想知道，給子組件綁定自定義事件，子組件是怎麼觸發的 巴拉巴拉的

開始正文了

在 Vue 中，事件大概分爲 4 種

一、自定義事件

二、DOM 事件

三、組件DOM 事件

四、組件自定義事件

而後再細分，就只有兩種

一、自定義事件

二、DOM 事件

下面就來粗略說一下事件

---

自定義事件

自定義事件 是使用觀察者模式創建起來的一種事件機制

分爲 我的使用 和 組件使用

自定義事件主要由下面兩部分構成

一、有事件存儲器

二、綁定事件，觸發事件，解綁事件三個函數

在 Vue 中，每一個實例都會添加一個屬性_events，用來存放本實例上註冊的自定義事件

_events 就是 事件存儲器，是一個對象

屬性名是 事件名，屬性值是事件回調

我的調用自定義事件

我也常常在項目中使用到 自定義事件，像下面這樣

沒錯，$on 就是註冊事件，$emit 是 觸發事件，$off 就是 解綁事件

在哪一個實例上註冊的事件，事件就屬於哪一個實例，正常狀況下，你是不可能能觸發別的實例上的事件的

而給組件綁定自定義事件 是怎麼樣的呢？

結果也是同樣的，前面的解析處理能夠無論，最後一樣是使用內置的 $on 方法去註冊事件

而這個事件依然是屬於子組件的，存放在 子組件的 _events 中

因此你能夠在子組件中，使用 this.$emit 觸發這個事件

DOM 事件

DOM 事件，最後就是直接給 DOM 綁定事件

使用 addEventListeners 綁定事件，沒有作任何兼容處理，灰常簡單

綁定事件，是在DOM 建立以後，插入頁面以前

一、普通標籤綁定事件

很簡單，普通 addEventListener 綁定DOM事件就完事了

事件會被保存在這個節點解析成的 vnode 中，就是 vm._vnode

二、組件綁定DOM 事件

若是要給組件綁定原生DOM 事件，須要加上 native 這個修飾器

組件綁定的DOM 事件，在父實例解析完畢開始掛載時，遇到子元素是組件，而後去解析組件內部並生成DOM以後才 addEventListener 綁定

綁定的原生事件，會被存放在組件的外殼節點上 vm.$vnode

還有，你可能會想，若是這樣綁定DOM事件會怎麼樣？

問得好，這樣並不會綁定DOM事件，而是給組件綁定自定義事件，最後是會存在 子組件的 _events 中的，並不會綁定DOM事件

而後能夠在子組件中用 this.$emit("click") 去觸發這個父組件綁定的這個click