【Vue原理】Event - 源碼版之綁定組件DOM事件

Mr_zhang 發布于2019-08-23 18:35 / 2815人閱讀

摘要：寫文章不容易，點個贊唄兄弟專注源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于版本如果你覺得排版難看，請點擊下面鏈接或者拉到下面關注公眾號也可以吧原理源碼版之綁定組件事件上一篇已經

寫文章不容易，點個贊唄兄弟
專注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧
研究基于 Vue版本 【2.5.17】

如果你覺得排版難看，請點擊 下面鏈接 或者拉到下面關注公眾號也可以吧

【Vue原理】Event - 源碼版之綁定組件DOM事件

上一篇已經說了綁定正常標簽的原生事件，今天是組件的原生事件，兩者最終作用是一樣的，但是過程有少少不同

最近更新快是因為文章早就寫完了，只是定時發而已哈哈

官網已經說明，要是想在組件上綁定原生事件，需要加上 native 修飾符

怎么解析

這里一樣，解析不是本文重點，只給出結果

現在，我有這么一個模板

被解析成這樣的渲染函數

然后生成這樣的 VNode

這個VNode 是外殼vnode，我們已經知道外殼 vnode 是保存父子組件關聯的數據

比如 props，事件之類的

所以你在組件上綁定的原生事件，自然而然就是保存在外殼vnode 上啦

綁定在外殼vnode 的數據，是要在解析組件內部模板時，才會拿出來使用的

然后！

你可以看到，nativeOn 和 on 都保存有事件

其實解析的時候，只保存在了 nativeOn，on 是后面從 nativeOn 直接賦值過去的

打印組件實例可以看到

耶！Vnode 相關又可以看這篇哦

【Vue原理】VNode - 源碼版

怎么綁定

綁定的流程千篇一律，但是有少少出入

可以參考我這篇，綁定原生事件的文章

【Vue原理】Event - 源碼版之綁定標簽DOM事件

相同的地方簡單提一下，不同的地方再仔細說

1、綁定事件發生在掛載DOM的階段，從 Vue.prototype._update 開始

2、_update 其中會調用 createElm 來生成DOM

3、createElm 碰到組件，會轉去解析組件

function createElm(vnode) {   

    if (

        createComponent(vnode, parentElm, refElm)

    ) {
        return
    }

    ....普通標簽的DOM生成和掛載

}

進入到 createComponent

function createComponent(vnode, parentElm, refElm) {    

    var i = vnode.data;    

    if (isDef(i)) {        

        // ... 創建組件實例

        if (如果組件實例已經創建成功) {

            initComponent(vnode);            

            return true

        }
    }
}

沒啥好說的，繼續轉到了另一個函數

function initComponent(vnode) {
    invokeCreateHooks(vnode);
}

然后這個函數還是為了調用 invokeCreateHooks 這個函數

invokeCreateHooks 上篇文章也出現過，作用是調用各種數據處理函數，比如處理 prop，class 等，其中還包括處理事件的函數 updateDOMListeners

updateDOMListeners 這個函數在上一篇文章中已經說過啦，大家可以看一下
Event - 源碼版之綁定標簽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") {

            
            // 給事件回調包裝一層

            target.addEventListener(name, function(){

                on[name]() // 執行保存在vnode的事件

            });

        }       
        // 新事件和舊事件不一樣，替換舊事件

        else if (newHandler !== oldHandler) {
            on[name] = newHandler;
        }
    }   

    // 移除舊事件

    for (name in oldOn) {  
        // 舊事件不存在新事件中，直接移除  

        if (typeof on[name] === "undefined") {

            target.removeEventListener(
                name, oldOn[name]
            );

        }
    }
}

GPU云服務器云服務器 event事件 js vue組件 vue組件開發 vue父子組件通訊

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/105486.html

【Vue原理】Event - 源碼版之綁定標簽DOM事件

摘要：寫文章不容易，點個贊唄兄弟專注源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于版本如果你覺得排版難看，請點擊下面鏈接或者拉到下面關注公眾號也可以吧原理源碼版之綁定標簽事件這里的綁定寫文章不容易，點個贊唄兄弟專注 Vue 源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于...

phoenixsky 2019-08-23 18:35 評論0 收藏0
【Vue原理】Event - 源碼版之綁定組件自定義事件

摘要：寫文章不容易，點個贊唄兄弟專注源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于版本如果你覺得排版難看，請點擊下面鏈接或者拉到下面關注公眾號也可以吧原理源碼版之綁定組件自定義事件組件寫文章不容易，點個贊唄兄弟專注 Vue 源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于...

amuqiao 2019-08-23 18:36 評論0 收藏0
【Vue原理】VModel - 源碼版之表單元素綁定流程

摘要：首先，兄弟，容我先說幾句涉及源碼很多，篇幅很長，我都已經分了上下三篇了，依然這么長，但是其實內容都差不多一樣，但是我還是毫無保留地給你了。寫文章不容易，點個贊唄兄弟專注 Vue 源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于 Vue版本【2.5.17】如果你覺得排版難看，請點擊下面鏈接或者拉到下面關注公眾號也...

sarva 2019-08-23 18:25 評論0 收藏0
【Vue原理】Event - 白話版

摘要：寫文章不容易，點個贊唄兄弟專注源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于版本如果你覺得排版難看，請點擊下面鏈接或者拉到下面關注公眾號也可以吧原理白話版事件是我最感興趣的東西之寫文章不容易，點個贊唄兄弟專注 Vue 源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于...

kumfo 2019-08-23 18:35 評論0 收藏0
【Vue原理】VModel - 白話版

摘要：執行的時候，會綁定上下文對象為組件實例于是中的就能取到組件實例本身，的代碼塊頂層作用域就綁定為了組件實例于是內部變量的訪問，就會首先訪問到組件實例上。其中的獲取，就會先從組件實例上獲取，相當于。寫文章不容易，點個贊唄兄弟專注 Vue 源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于 Vue版本【2.5.17】如果你覺得...

keke 2019-08-23 18:25 評論0 收藏0