資訊專欄INFORMATION COLUMN
摘要：寫文章不容易，點個贊唄兄弟專注源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內(nèi)部詳情，讓我們一起學(xué)習(xí)吧研究基于版本如果你覺得排版難看，請點擊下面鏈接或者拉到下面關(guān)注公眾號也可以吧原理源碼版之綁定標簽事件這里的綁定
寫文章不容易，點個贊唄兄弟
專注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內(nèi)部詳情，讓我們一起學(xué)習(xí)吧
研究基于 Vue版本 【2.5.17】
如果你覺得排版難看，請點擊 下面鏈接 或者 拉到 下面關(guān)注公眾號也可以吧
【Vue原理】Event - 源碼版 之 綁定標簽DOM事件
這里的綁定DOM事件，是指綁定原生標簽的DOM 事件
因為組件也是可以綁定原生DOM事件的，不過并不是在原生標簽上綁定，而是直接在組件上綁定的，這部分內(nèi)容會其他文章說明
或者你可以看看白話版先了解下Event
【Vue原理】Event - 白話版
怎么解析由于解析不是本內(nèi)容的重點，所以在這里就不談怎么解析的了，只說一個結(jié)果就好了
現(xiàn)在有這么一個模板
模板被解析成這樣的渲染函數(shù)
渲染函數(shù)執(zhí)行之后，得到這樣的 VNode
你可以看到，事件被存放到了 vnode.data 上
Vnode 有疑惑的可以看介里
【Vue原理】VNode - 源碼版
怎么綁定既然模板已經(jīng)被解析完成了，下一步就是開始綁定了
好的，繼續(xù)來走流程
在 template 解析得到 Vnode 之后，下面就會進行DOM生成掛載
而綁定事件，就發(fā)生在開始掛載，創(chuàng)建DOM 之后 的階段
掛載時從 Vue.prototype._update 這個函數(shù)開始的
掛載的流程，可以看看這篇文章
從模板到DOM的簡要流程
1、開始掛載VNode創(chuàng)建完畢，傳入 Vue.prototype._update 這個方法中，進行比對新舊VNode
然后生成DOM掛載頁面
其中需要生成DOM，調(diào)用的方法是 createElm
2、創(chuàng)建DOM創(chuàng)建DOM，在Vue 中調(diào)用的是 createElm 這個方法
看過以前的文章的，都知道這個函數(shù)的作用是
根據(jù) vnode 生成DOM，并且進行掛載
而在 createElm 中，會調(diào)用一個函數(shù)去 處理模板上相關(guān)的數(shù)據(jù)
比如處理屬性，類名，style 之類的，其中DOM事件也是在這里處理的
這個函數(shù)就是 invokeCreateHooks，繼續(xù)往下看
function createElm(vnode) {
// ....處理組件
// ....生成標簽對應(yīng)dom
// ....遞歸遍歷子節(jié)點
invokeCreateHooks(vnode);
// ....插入DOM 節(jié)點
}
3、處理數(shù)據(jù)
上面源碼中出現(xiàn)的 invokeCreateHooks 這個方法是用來處理數(shù)據(jù)的
每種數(shù)據(jù)（style，class等），都有一個專門的函數(shù)去進行處理
而 invokeCreateHooks，就是負責(zé)執(zhí)行每種數(shù)據(jù)的處理函數(shù)，很簡單，就是一個單純遍歷執(zhí)行的過程
其中就包括處理 DOM 事件的函數(shù)，便是 updateDOMListeners
function invokeCreateHooks(
vnode
) {
/**
* 執(zhí)行的函數(shù)包括下面這么多
* cbs = [
* create:[
* updateAttrs, updateClass,
* updateDOMListeners, updateDOMProps,
* updateStyle, create, updateDirectives
* ]
* ]
**/
for (var b = 0; b < cbs.create.length; ++b) {
// 其中會調(diào)用 updateDOMListeners
// emptyNode 是空節(jié)點，因為這里是初始化才會調(diào)用的
// 所以舊節(jié)點是空節(jié)點
cbs.create[b](emptyNode, vnode);
}
....
}
下面看下 處理DOM 事件的函數(shù)
4、綁定DOM事件簡化的源碼，看起來順眼多了，主要邏輯一清二楚，主要就是綁定事件和解綁事件，你看下嘍，挺簡單的
function updateDOMListeners(oldVnode, vnode) {
var on = vnode.data.on || {};
var oldOn = oldVnode.data.on || {};
var target = vnode.elm;
// 遍歷綁定的事件
for (name in on) {
newHandler = on[name];
oldHandler = oldOn[name];
// 沒有舊事件，就直接添加新事件
if (typeof oldHandler === "undefined") {
// 給事件回調(diào)包裝一層
target.addEventListener(name, function(){
on[name]() // 執(zhí)行保存在vnode的事件
});
}
// 新事件和舊事件不一樣，替換舊事件
else if (newHandler !== oldHandler) {
on[name] = newHandler;
}
}
// 移除舊事件
for (name in oldOn) {
// 舊事件不存在新事件中，直接移除
if (typeof on[name] === "undefined") {
target.removeEventListener(
name, oldOn[name]
);
}
}
}
看看綁定函數(shù)和 移除函數(shù)，就只是簡單使用 addEventListener 和 removeEventListener，我沒看之前還以為 Vue 寫了很多兼容，沒想到就是這么簡單完成這個功能
有點驚訝，反正簡單也好吧，哈哈哈，簡單看著就是蘇胡啊~~
綁定邏輯很簡單1、新舊事件相同，替換舊事件
2、新事件不存在舊事件中，綁定新事件
3、舊事件不存在新事件中，解綁舊事件
其中會給回調(diào)事件函數(shù)包裝一層函數(shù)，然后在內(nèi)部執(zhí)行綁定的回調(diào)，包裝一層的原因是，為了在回調(diào)中做點其他操作（比如宏微任務(wù)的處理等，這里為了簡單去掉了）
并且舊事件回調(diào)改了的時候，就更加方便了，不用解綁再綁定，直接把執(zhí)行的事件回調(diào) on[name]替換掉就ok了
好的，原生標簽綁定DOM 事件到這里就完成了，希望對大家有所幫助
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/105487.html
摘要：寫文章不容易，點個贊唄兄弟專注源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內(nèi)部詳情，讓我們一起學(xué)習(xí)吧研究基于版本如果你覺得排版難看，請點擊下面鏈接或者拉到下面關(guān)注公眾號也可以吧原理源碼版之綁定組件事件上一篇已經(jīng) 寫文章不容易，點個贊唄兄弟專注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內(nèi)部詳情，讓我們一起學(xué)習(xí)吧研究基于...
摘要：寫文章不容易，點個贊唄兄弟專注源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內(nèi)部詳情，讓我們一起學(xué)習(xí)吧研究基于版本如果你覺得排版難看，請點擊下面鏈接或者拉到下面關(guān)注公眾號也可以吧原理白話版事件是我最感興趣的東西之 寫文章不容易，點個贊唄兄弟專注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內(nèi)部詳情，讓我們一起學(xué)習(xí)吧研究基于...
摘要：首先，兄弟，容我先說幾句涉及源碼很多，篇幅很長，我都已經(jīng)分了上下三篇了，依然這么長，但是其實內(nèi)容都差不多一樣，但是我還是毫無保留地給你了。 寫文章不容易，點個贊唄兄弟專注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內(nèi)部詳情，讓我們一起學(xué)習(xí)吧研究基于 Vue版本 【2.5.17】 如果你覺得排版難看，請點擊 下面鏈接 或者 拉到 下面關(guān)注公眾號也...
摘要：寫文章不容易，點個贊唄兄弟專注源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內(nèi)部詳情，讓我們一起學(xué)習(xí)吧研究基于版本如果你覺得排版難看，請點擊下面鏈接或者拉到下面關(guān)注公眾號也可以吧原理源碼版之綁定組件自定義事件組件 寫文章不容易，點個贊唄兄弟專注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內(nèi)部詳情，讓我們一起學(xué)習(xí)吧研究基于...
摘要：寫文章不容易，點個贊唄兄弟專注源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內(nèi)部詳情，讓我們一起學(xué)習(xí)吧研究基于版本如果你覺得排版難看，請點擊下面鏈接或者拉到下面關(guān)注公眾號也可以吧原理源碼版之拼接綁定的事件今天我們 寫文章不容易，點個贊唄兄弟 專注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內(nèi)部詳情，讓我們一起學(xué)習(xí)吧研究...
閱讀 3579·2023-04-25 19:39
閱讀 3905·2021-11-18 13:12
閱讀 3709·2021-09-22 15:45
閱讀 2517·2021-09-22 15:32
閱讀 828·2021-09-04 16:40
閱讀 3857·2019-08-30 14:11
閱讀 1965·2019-08-30 13:46
閱讀 1649·2019-08-29 15:43
