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

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

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

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

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

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

一個發(fā)布者$emit發(fā)布一個事件到信號中心 eventBus ，訂閱者們 $on 通過信號中心收到該事件，進行處理

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

class EventBus{
	constructor(){
		// 1.處理事件對應的處理函數(shù)
		this.sub = {}
	}
	$on(event,fn){
		if(!this.sub[event]){
			// 2.判斷sub是否已經(jīng)存在該事件了，沒有的話就賦值一個數(shù)組，用來存儲觸發(fā)函數(shù)
			this.sub[event] = []
		}
		// 3.將函數(shù)push到對應的事件中
		this.sub[event].push(fn)
	}
	$emit(event){
		if(this.sub[event]){
			this.sub[event].forEach(fn=>{
				fn() //4.執(zhí)行對應事件中的處理函數(shù)
			})
		}
	}
}
// 信號中心
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就是消費和定義，咱們在代碼中講解

<body>
    <div id="app">
<button @click="add">測試</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的原理實現(xiàn)

先在create加個斷點

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

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

首先他把this傳給vm
然后判斷event是不是一個數(shù)組，如果是個數(shù)組他就會以循環(huán)的方式進行賦值，繼續(xù)執(zhí)行on的迭代方法，如果不是數(shù)組進入else的邏輯判斷去找他是不是包含了event，如果不包含他會自己創(chuàng)建個event設置成空數(shù)組，把新建的處理函數(shù)push進去，這說明我們在定義個事件的時候，是可以同時為一個事件定義多個執(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')
                }
            }
        });

說明定義多個執(zhí)行方法也是沒問題的

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

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

 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')
                }
            }
        });

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

分析$emit

先打個斷點

1.emit的源碼

2.關鍵的一步：先通過名稱改成小寫后然后直接從我們vue實例下劃線events這個對象當中拿出事件對應的方法，如果找不到什么都不做，直接返回回來，找的話，第一步先判斷cbs的長度打不打與1，因為他有可能是個數(shù)組，多個處理函數(shù)如果大于一就變成了一個數(shù)組，如果等于一的話直接返回cbs.

第二步他對arguments做了處理把后面的參數(shù)變成數(shù)組，第一個不要了，因為事件名稱他用完了，緊接著他對cbs做了個循環(huán)，