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

yunhao 發布于2019-08-23 18:36 / 769人閱讀

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

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

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

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

Vue 的自定義事件很簡單，就是使用觀察者模式進行事件的監聽和分發

Vue 封裝的這個觀察者模式，可以說是很完善了，這個可以獨立抽取出來的在其他項目中使用的代碼，只需要做一點點改動，把事件存儲器換個地方（Vue 放在了實例上）

我經常在項目中使用，就是為了解耦或者解決一些異步的問題

今天來詳細探索 Vue 的自定義事件

首先，Vue 的事件存儲器放在那里？

沒錯，放在 vm._events 中

你看，比如你這樣監聽事件

看到實例上保存了你的事件

1、事件存儲器

vm._events

看下這個事件存儲器在哪里生成的

首先，實例在初始化的時候，給實例增加一個事件存儲器 _events

Vue.prototype._init = function(options) {

    initEvents(vm);    

    //...初始化選項數據，解析模板，掛載dom等

}

function initEvents(vm) {
    vm._events = Object.create(null);
}

以后，所有這個實例監聽的事件，就都存在這里了

那么，接下來就來看自定義事件的源碼了

下面的源碼比較不太屬于 Vue 的內容，比較獨立，很實用，相信大家也都看得懂，這里主要起一個記錄的作用

下面會有四個函數

綁定事件，$on

一次性綁定事件，$once

觸發事件，$emit

解綁事件，$off

2、$on

注冊事件，接收事件名和回調，很清楚了，都能看得懂

Vue.prototype.$on = function(event, fn) {    

    var vm = this;   

    if (Array.isArray(event)) {        

        for (var i = 0,l = event.length; i < l; i++) {            
            this.$on(event[i], fn);
        }
    } 
    else { 
        (vm._events[event] || (vm._events[event] = [])).push(fn);

    }    

    // 為了鏈式調用
    return vm
};

3、$once

單次注冊。只監聽一次，觸發之后馬上銷毀

它妙就妙在，把回調包裝了一下，在回調執行時，先解綁事件，再調用原回調

Vue.prototype.$once = function(event, fn) {  

    var vm = this;     

    function on() {

        vm.$off(event, on);
        fn.apply(vm, arguments);
    }

    on.fn = fn;
    vm.$on(event, on);      

   
    // 為了鏈式調用
    return vm
};

4、$emit

觸發事件，接收事件名，然后拿到原本設置的回調，遍歷調用

Vue.prototype.$emit = function(event) {  

    var vm = this;    

    var _events= event.toLowerCase();    

    var cbs = vm._events[_events]; 

    if (cbs) {

        cbs = cbs.length > 1 ? toArray(cbs) : cbs;        
        var args = toArray(arguments, 1);        

        for (var i = 0, l = cbs.length; i < l; i++) {

          cbs[i].apply(vm, args);
        }

    }    

    // 為了鏈式調用
    return vm
};

5、$off

取消監聽事件或者移除監聽回調

接收事件名和綁定時的事件回調

很簡單的啦

Vue.prototype.$off = function(event, fn) {   

    var vm = this;    

    if (!arguments.length) {

        vm._events = Object.create(null);        

        return vm
    }    

    // 遞歸調用
    if (Array.isArray(event)) {        

        for (var i = 0, l = event.length; i < l; i++) { 
           this.$off(event[i], fn);
        }        
        return vm
    } 

    var cbs = vm._events[event];    

    if (!cbs) return vm    

    if (!fn) {

        vm._events[event] = null;        

        return vm

    }    

    // 去掉特定的函數
    if (fn) {        

        var cb;        

        var len = cbs.length;     

        // 遍歷移除相應回調
        while (len--) {

            cb = cbs[len];            

            if (cb === fn || cb.fn === fn) {

                cbs.splice(len, 1);                

                break

            }
        }
    }    

    // 為了鏈式調用
    return vm
};

云服務器 GPU云服務器自定義事件 js 自定義觸發事件 event事件 js vue源碼

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

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

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

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

amuqiao 2019-08-23 18:36 評論0 收藏0
【Vue原理】Compile - 源碼版之 generate 拼接綁定的事件

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

OnlyMyRailgun 2019-08-26 10:45 評論0 收藏0
【Vue原理】Event - 白話版

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

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

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

Mr_zhang 2019-08-23 18:35 評論0 收藏0
【Vue原理】Event - 源碼版之綁定標簽DOM事件

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

phoenixsky 2019-08-23 18:35 評論0 收藏0