VUE原始碼分析之全域性函式use原理

2021-09-28 16:17:47 字數 1182 閱讀 5126

vue提供了全域性方法use, vue.use(plugin)。vue官網對此有描述:

安裝 vue.js 外掛程式。如果外掛程式是乙個物件,必須提供install方法。如果外掛程式是乙個函式,它會被作為 install 方法。install 方法呼叫時,會將 vue 作為引數傳入。

該方法需要在呼叫new vue()之前被呼叫。

當 install 方法被同乙個外掛程式多次呼叫,外掛程式將只會被安裝一次。

我們按照官網描述寫乙個小例子:

首先定義乙個myplugin 物件,並給這個物件新增乙個install方法。安裝官網描述必須提供這個install方法。我們呼叫vue全域性方法use, 把myplugin物件作為引數傳遞給use引數,並傳遞了其他引數。

通過列印我們可以看到 :

install args 0:     會列印出vue的建構函式

intall args 1 :      會列印出para1 

intall args 2 :      會列印出para2 

intall vue version :      會列印出vue的版本號

而para3,para4 沒有列印, 從列印看出 install 方法被同乙個外掛程式多次呼叫,外掛程式將只會被安裝一次。

我們看看vue.use 這個全域性函式怎麼實現的。

vue.use = function (plugin) 

// additional parameters

var args = toarray(arguments, 1); //解析出第乙個形參之後的其他形參

args.unshift(this); //把vue建構函式插入到args陣列中的第乙個元素之前

if (typeof plugin.install === 'function') else if (typeof plugin === 'function')

installedplugins.push(plugin);

return this

};

**很簡單,直接在**中注釋了。關鍵點在於args.unshift(this) 把vue給插入,這個外掛程式就可以使用vue了。

也就解釋了在install方法中 _vue.version可以列印出vue的版本號了。

Vue原始碼分析之Observer

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

Vue原始碼分析

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

Vue 原始碼分析 建構函式原型

在執行 npm run dev 的時候 根據 script config.js 檔案中的配置 web full dev banner 可知入口檔案為 web entry runtime with compiler.js 最終輸出為 dist vue.js 有乙個umd 模組 模組的型別總共有 iif...