Vue中$on和$emit的實(shí)現(xiàn)原理分析

更新時(shí)間：2022年05月30日 08:48:27 作者：很懶的哦

這篇文章主要介紹了Vue中$on和$emit的實(shí)現(xiàn)原理分析，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

Vue中發(fā)布訂閱模式

在Vue中采用了發(fā)布訂閱模式，典型的兄弟組件間的通信$on和$emit

發(fā)布訂閱模式：（訂閱者、發(fā)布者、信號(hào)中心）

一個(gè)發(fā)布者$emit發(fā)布一個(gè)事件到信號(hào)中心 eventBus ，訂閱者們 $on 通過(guò)信號(hào)中心收到該事件，進(jìn)行處理

在這里模擬一個(gè)自定義事件 $on和$emit事件

class EventBus{
	constructor(){
		// 1.處理事件對(duì)應(yīng)的處理函數(shù)
		this.sub = {}
	}
	$on(event,fn){
		if(!this.sub[event]){
			// 2.判斷sub是否已經(jīng)存在該事件了，沒(méi)有的話就賦值一個(gè)數(shù)組，用來(lái)存儲(chǔ)觸發(fā)函數(shù)
			this.sub[event] = []
		}
		// 3.將函數(shù)push到對(duì)應(yīng)的事件中
		this.sub[event].push(fn)
	}
	$emit(event){
		if(this.sub[event]){
			this.sub[event].forEach(fn=>{
				fn() //4.執(zhí)行對(duì)應(yīng)事件中的處理函數(shù)
			})
		}
	}
}
// 信號(hào)中心
const vm = new EventBus()
// 訂閱事件
vm.$on('click',()=>{console.log('觸發(fā)了click事件')})
vm.$on('change',()=>{console.log('觸發(fā)了change事件')})
// 發(fā)布訂閱
vm.$emit('click')
vm.$emit('change')

$emit和$on用法深挖

俗稱的 e m i t 和 emit和 emit和on就是消費(fèi)和定義，咱們?cè)诖a中講解

<body>
    <div id="app">
<button @click="add">測(cè)試</button>

            </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                message:'ok'
            },
            created() {
                this.$on('my_event',this.datalist)
            },
            methods: {
                datalist(e){
               console.log(this.message,e);
               
                },
                add(){
                    this.$emit('my_event','hello wu')
                }
            }
        });
    </script>
</body>

首先剖析一下$on的原理實(shí)現(xiàn)

先在create加個(gè)斷點(diǎn)

我們會(huì)發(fā)現(xiàn)他會(huì)跳到on的源碼中

我們傳入的參數(shù)是兩個(gè)，第一個(gè)是我們事件的名稱，第二個(gè)是我們事件處理方法對(duì)應(yīng)的event和fn

首先他把this傳給vm
然后判斷event是不是一個(gè)數(shù)組，如果是個(gè)數(shù)組他就會(huì)以循環(huán)的方式進(jìn)行賦值，繼續(xù)執(zhí)行on的迭代方法，如果不是數(shù)組進(jìn)入else的邏輯判斷去找他是不是包含了event，如果不包含他會(huì)自己創(chuàng)建個(gè)event設(shè)置成空數(shù)組，把新建的處理函數(shù)push進(jìn)去，這說(shuō)明我們?cè)诙x個(gè)事件的時(shí)候，是可以同時(shí)為一個(gè)事件定義多個(gè)執(zhí)行方法，最后找到定義的方法并返回
定義第二種方法看代碼

 var vm = new Vue({
            el: '#app',
            data: {
                message:'ok'
            },
            created() {
                this.$on('my_event',this.datalist)
                this.$on('my_event',this.datalist2)
            },
            methods: {
                datalist(e){
               console.log(this.message,e);
               
                },
                datalist2(e){
               console.log('我是第二種方法',e);
               
                },
                add(){
                    this.$emit('my_event','hello wu')
                }
            }
        });

說(shuō)明定義多個(gè)執(zhí)行方法也是沒(méi)問(wèn)題的

有一點(diǎn)要記住先定義的先觸發(fā)

還有一個(gè)點(diǎn)他是可以是個(gè)數(shù)組，在不同的事件綁定同一個(gè)處理方法，如下代碼

 var vm = new Vue({
            el: '#app',
            data: {
                message:'ok'
            },
            created() {
                this.$on(['my_event','my_event2'],this.datalist)
                console.log(this._events);
                
                // this.$on('my_event',this.datalist2)
            },
            methods: {
                datalist(e){
               console.log(this.message,e);
               
                },
                datalist2(e){
               console.log('我是第二種方法',e);
               
                },
                add(){
                    this.$emit('my_event2','hello wu')
                }
            }
        });

換成第二個(gè)數(shù)組他還是可以實(shí)現(xiàn)

分析$emit

先打個(gè)斷點(diǎn)

1.emit的源碼

2.關(guān)鍵的一步：先通過(guò)名稱改成小寫(xiě)后然后直接從我們vue實(shí)例下劃線events這個(gè)對(duì)象當(dāng)中拿出事件對(duì)應(yīng)的方法，如果找不到什么都不做，直接返回回來(lái)，找的話，第一步先判斷cbs的長(zhǎng)度打不打與1，因?yàn)樗锌赡苁莻€(gè)數(shù)組，多個(gè)處理函數(shù)如果大于一就變成了一個(gè)數(shù)組，如果等于一的話直接返回cbs.

第二步他對(duì)arguments做了處理把后面的參數(shù)變成數(shù)組，第一個(gè)不要了，因?yàn)槭录Q他用完了，緊接著他對(duì)cbs做了個(gè)循環(huán)，