VUE原始碼分析之eventBus原理

2021-09-27 09:12:14 字數 1074 閱讀 2971

vue中eventbus可以用來進行任何元件之間的通訊,我們可以把eventbus當成乙個管道,這個管道兩端可以接好多元件,兩端的任何乙個元件都可以進行通訊。其實這個管道就是vue例項,例項中的$on, $off, $emit方法來實現此功能。還是老樣子,先通過簡單例子看看eventbus怎麼用。

我們例項化了乙個vue例項,並賦值給了eventbus全域性變數。那麼我們就可以在任何地方使用這個全域性變數。接下來我們看看這個vue例項中的$on 和 $emit方法。

function eventsmixin (vue) 

} else

}return vm

};vue.prototype.$once = function (event, fn)

on.fn = fn;

vm.$on(event, on);

return vm

};vue.prototype.$off = function (event, fn)

// array of events

if (array.isarray(event))

return vm

}// specific event

var cbs = vm._events[event];

if (!cbs)

if (!fn)

// specific handler

var cb;

var i = cbs.length;

while (i--)

}return vm

};vue.prototype.$emit = function (event)

}var cbs = vm._events[event];

if (cbs)

}return vm

};}

看看這幾個方法,應該都能看的懂。大體說一下,_events是個物件,event作為屬性,每個屬性值為乙個陣列。當呼叫$on方法時就向這個event對應的陣列中push方法。當呼叫$emit方法時就遍歷event對應陣列中的方法,挨個執行這些方法。

Vue原始碼分析之Observer

四月份真是慵懶無比的乙個月份,看著手頭上沒啥事幹,只好翻翻 啥的,看了一會vue的原始碼,忽而有點感悟,於是便記錄一下。觀察者模式一般包含發布者 publisher 和訂閱者 subscriber 兩種角色 顧名思義發布者負責發布訊息,訂閱者通過訂閱訊息響應動作了。回到vue中,在vue原始碼cor...

Vue原始碼分析

在開始原始碼分析工作之前,我們在當前篇章做好相應的準備工作,以便更好地展開分析。將原始碼fork到自己的github倉庫中 git clone 自己的github vue 位址 dist 打包之後的結果 examples 示例 src compiler 編譯相關 core vue 核心庫 compo...

Vue原始碼分析(流程分析)

使用步驟 1.編寫 頁面 模板 1.直接在html標籤中寫 2.使用template 3.使用單檔案 2.建立vue例項 1.在vue 的建構函式中 data,methods,computer,watcher,props,3.將vue掛載到頁面中 mount 資料驅動模型 vue執行流程 1.獲得模...