解析Vue.use()是干什么的
start
- 前幾天使用了一個別人封裝的電子簽名組件:vueEsign。
- 在初始化的時候有這么一行代碼:
Vue.use(vueEsign)
- 之前使用element-ui,也需要使用
Vue.use()
- 這行代碼到底是什么?學習一下。
本文所有演示內(nèi)容,vue.js版本為2.6.14
1. Vue.use是什么,了解一下!?
1.1 main.js中的Vue.use()
import Vue from 'vue' import App from './App.vue' import router from './router' import vueEsign from 'vue-esign' Vue.use(vueEsign) Vue.config.productionTip = false new Vue({ router, render: h => h(App) }).$mount('#app')
1.2 簡單解釋一下這里的import的邏輯,
- 如果
from
后面是路徑,直接沿路徑去尋找對應文件。 - 如果
from
后面是一個名稱,那就引入是第三方模塊,會去node_modules
中尋找對應名稱的文件夾。
node_modules
》 package.json
》 main屬性
1.3 Vue.use()代碼
找到對應文件
對應代碼
function initUse (Vue) { // 1. Vue.use是一個函數(shù) Vue.use = function (plugin) { // 2. 定義一個數(shù)組 如果this._installedPlugin不存在,會執(zhí)行`this._installedPlugins = [] var installedPlugins = (this._installedPlugins || (this._installedPlugins = [])); // 3. 判斷是否已經(jīng)注冊了,已經(jīng)注冊了直接return if (installedPlugins.indexOf(plugin) > -1) { return this } // 4.獲取其他參數(shù) 例如: Vue.use(plugin,a,b,c) 中的 a b c var args = toArray(arguments, 1); // 5.參數(shù)第一項,加一個Vue實例進去 args.unshift(this); // 6. plugin 有 install 這個方法 if (typeof plugin.install === 'function') { // 7. 執(zhí)行一下install,再把參數(shù)傳遞進去 (可以看插件的install方法,接受第一個參數(shù),就是Vue實例) plugin.install.apply(plugin, args); } else if (typeof plugin === 'function') { // 8. 如果plugin 本身就是函數(shù) 直接執(zhí)行 plugin.apply(null, args); } // 9. 來一個數(shù)組存儲已經(jīng)注冊的插件 installedPlugins.push(plugin); return this }; }
2. 看一下 vueEsign 插件的install是什么?
node_modules\vue-esign\src\idnex.js
// 1. 引入一個vue組件,實際上就是一個對象 import vueEsign from './index.vue' // 2.對象install屬性是一個方法,它接受一個參數(shù) Vue vueEsign.install = function (Vue) { // 3. 判斷是否已經(jīng)安裝了這個插件(這里this指向為vueEsign,在Vue.use中用apply改寫的) if (this.installed) { return } this.installed = true // 4. 在Vue上注冊一下組件 Vue.component('vueEsign', vueEsign) } export default vueEsign
3.看一下 element-ui的install是什么?
node_modules\element-ui\src\index.js
// 1. 它也是一個函數(shù) const install = function(Vue, opts = {}) { // 2.讀取了部分其他本地化配置 locale.use(opts.locale); locale.i18n(opts.i18n); // 3.components就是element-ui的組件組成的數(shù)組,遍歷一下,在Vue上注冊了這些組件。 // (!!可以發(fā)現(xiàn)這里和另一個插件有相同點,都是在install的第一個參數(shù)Vue上注冊組件,) components.forEach(component => { Vue.component(component.name, component); }); // 4. 這里的 Vue.use 原理是一樣的(可以對照截圖,它這里后續(xù)是在Vue上注冊了指令) Vue.use(InfiniteScroll); Vue.use(Loading.directive); // 5.下面都是在Vue原型上掛載屬性或方法 Vue.prototype.$ELEMENT = { size: opts.size || '', zIndex: opts.zIndex || 2000 }; Vue.prototype.$loading = Loading.service; Vue.prototype.$msgbox = MessageBox; Vue.prototype.$alert = MessageBox.alert; Vue.prototype.$confirm = MessageBox.confirm; Vue.prototype.$prompt = MessageBox.prompt; Vue.prototype.$notify = Notification; Vue.prototype.$message = Message; };
4. Vue.use() 總結(jié)
- 首先
Vue.use
本身是一個函數(shù); Vue.use
這個函數(shù)做了這些操作:
- 判斷插件是否注冊;
- 如果插件自帶insatll屬性,執(zhí)行它,同時傳遞一個Vue構造函數(shù)作為第一個參數(shù),以及use中的其他參數(shù);
- 如果插件本身就是函數(shù),執(zhí)行它,同時傳遞一個Vue構造函數(shù)作為第一個參數(shù),以及use中的其他參數(shù)
- 記錄這個插件已經(jīng)注冊;
3.暫時遇到的插件本身都是一個對象,然后install中都會拿到傳遞來的Vue構造函數(shù)進行一些綁定操作。例如綁定組件,例如在原型上添加方法。
5.為什么有的庫就不需要使用Vue.use
例如常見的aixos引入
import axios from 'axios' Vue.prototype.$axios=axios
axios本身是不依賴Vue去運行的,axios本身就可以在瀏覽器端或者node端都能進行http請求。
這里掛載到Vue原型的$axios屬性上,只是為了方便使用。
end
- 感覺就是
組件
需要和Vue構造函數(shù)
進行交互的時候,才需要Vue.use()。 - 本質(zhì)就是傳遞一個 Vue構造函數(shù) 給插件使用,僅此而已。
到此這篇關于Vue.use()是干什么的的文章就介紹到這了,更多相關Vue.use()內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
vue+webpack實現(xiàn)異步加載三種用法示例詳解
這篇文章主要介紹了vue+webpack實現(xiàn)異步加載的三種用法,文中給大家提到了vue+webpack實現(xiàn)異步組件加載的代碼,非常不錯,具有參考借鑒價值,需要的朋友參考下吧2018-04-04vue使用cesium創(chuàng)建數(shù)據(jù)白模方式
這篇文章主要介紹了vue使用cesium創(chuàng)建數(shù)據(jù)白模方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10