成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

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

Mr_zhang / 2896人閱讀

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

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

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

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

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

最近更新快是因?yàn)槲恼略缇蛯懲炅?，只是定時(shí)發(fā)而已哈哈

官網(wǎng)已經(jīng)說明，要是想在組件上綁定原生事件，需要加上 native 修飾符

怎么解析

這里一樣，解析不是本文重點(diǎn)，只給出結(jié)果

現(xiàn)在，我有這么一個(gè)模板

被解析成這樣的渲染函數(shù)

然后生成這樣的 VNode

這個(gè)VNode 是 外殼vnode，我們已經(jīng)知道外殼 vnode 是保存 父子組件關(guān)聯(lián)的數(shù)據(jù)

比如 props，事件之類的

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

綁定在 外殼vnode 的數(shù)據(jù)，是要在解析組件內(nèi)部模板時(shí)，才會(huì)拿出來使用的

然后！

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

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

打印組件實(shí)例可以看到

耶！Vnode 相關(guān)又可以看這篇哦

【Vue原理】VNode - 源碼版

怎么綁定

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

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

【Vue原理】Event - 源碼版 之 綁定標(biāo)簽DOM事件

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

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

2、_update 其中會(huì)調(diào)用 createElm 來生成DOM

3、createElm 碰到組件，會(huì)轉(zhuǎn)去解析組件

function createElm(vnode) {   

    if (

        createComponent(vnode, parentElm, refElm)

    ) {
        return
    }

    ....普通標(biāo)簽的DOM生成和掛載

}

進(jìn)入到 createComponent

function createComponent(vnode, parentElm, refElm) {    

    var i = vnode.data;    

    if (isDef(i)) {        

        // ... 創(chuàng)建組件實(shí)例

        if (如果組件實(shí)例已經(jīng)創(chuàng)建成功) {

            initComponent(vnode);            

            return true

        }
    }
}

沒啥好說的，繼續(xù)轉(zhuǎn)到了另一個(gè)函數(shù)

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

然后這個(gè)函數(shù)還是為了調(diào)用 invokeCreateHooks 這個(gè)函數(shù)

invokeCreateHooks 上篇文章也出現(xiàn)過，作用是調(diào)用各種數(shù)據(jù)處理函數(shù)，比如處理 prop，class 等，其中還包括處理事件的函數(shù) updateDOMListeners

updateDOMListeners 這個(gè)函數(shù)在上一篇文章中已經(jīng)說過啦，大家可以看一下
Event - 源碼版 之 綁定標(biāo)簽DOM事件

但是我依然給復(fù)制源碼到這里，但是不寫解析

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]
            );

        }
    }
}

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/105486.html

相關(guān)文章

  • 【Vue原理】Event - 源碼版 之 綁定標(biāo)簽DOM事件

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

    phoenixsky 評論0 收藏0

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

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

    amuqiao 評論0 收藏0

  • 【Vue原理】VModel - 源碼版 之 表單元素綁定流程

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

    sarva 評論0 收藏0

  • 【Vue原理】Event - 白話版

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

    kumfo 評論0 收藏0

  • 【Vue原理】VModel - 白話版

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

    keke 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<