Vue.use()的用法和install的用法解析
Vue.use()和install用法
介紹
在vue的main.js中，我們經(jīng)常使用Vue.use(xx)方法。比如我們引入elementUI，在main.js中，我們一般通過如下代碼引入：
import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI)
為什么這樣做？
官方解釋
安裝 Vue.js 插件。如果插件是一個(gè)對(duì)象，必須提供 install 方法。如果插件是一個(gè)函數(shù)，它會(huì)被作為 install 方法。
install 方法調(diào)用時(shí)，會(huì)將 Vue 作為參數(shù)傳入。什么意思呢？ Vue.use() 中的參數(shù)必須是一個(gè)function函數(shù)或者是一個(gè)Object對(duì)象，如果是對(duì)象的話，必須在對(duì)象中提供一個(gè)install方法。之后會(huì)將 Vue 作為參數(shù)傳入。
總結(jié)：
如果Vue.use() 中的參數(shù)是一個(gè)function函數(shù)，那么函數(shù)的參數(shù)是Vue對(duì)象。
如果Vue.use() 中的參數(shù)是一個(gè)Object對(duì)象，那么這個(gè)對(duì)象必須提供一個(gè)install方法，install方法的參數(shù)就是Vue。
Vue.use為什么要使用install
疑問
Vue.use注冊(cè)插件和Vue.prototype.xxx掛載方式有什么區(qū)別，使用Vue.use優(yōu)勢(shì)在哪，為什么使用Vue.use而不使用Vue.prototype.xxx
從源碼分析
// Vue源碼文件路徑：src/core/shared/util.js
export function toArray (list: any, start?: number): Array<any> {
start = start || 0
let i = list.length - start
const ret: Array<any> = new Array(i)
while (i--) {
ret[i] = list[i + start]
}
return ret
}
// Vue源碼文件路徑：src/core/global-api/use.js
import { toArray } from '../util/index'
export function initUse (Vue: GlobalAPI) {
Vue.use = function (plugin: Function | Object) {
const installedPlugins = (this._installedPlugins || (this._installedPlugins = []))
if (installedPlugins.indexOf(plugin) > -1) { // 如果該插件已被注冊(cè)，則不再進(jìn)行注冊(cè)
return this
}
// additional parameters
const args = toArray(arguments, 1)
args.unshift(this)
if (typeof plugin.install === 'function') {
plugin.install.apply(plugin, args)
} else if (typeof plugin === 'function') {
plugin.apply(null, args)
}
installedPlugins.push(plugin)
return this
}
}
vue官網(wǎng)是這樣說的
install方法應(yīng)該就是解決防止插件多次注冊(cè)的情況吧；如果使用Vue.prototype.xxx掛載，每使用一次就要重新掛載一次。
個(gè)人理解，還請(qǐng)大佬指正解釋一下install的優(yōu)勢(shì)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
本文主要介紹了為什么vue中不建議使用空字符串作為className，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
elementui 開始結(jié)束時(shí)間可以選擇同一天不同時(shí)間段的實(shí)現(xiàn)代碼
這篇文章主要介紹了elementui 開始結(jié)束時(shí)間可以選擇同一天不同時(shí)間段的實(shí)現(xiàn)代碼,需要先在main.js中導(dǎo)入相應(yīng)代碼,代碼簡(jiǎn)單易懂,需要的朋友可以參考下2024-02-02
vue3數(shù)據(jù)可視化實(shí)現(xiàn)數(shù)字滾動(dòng)特效代碼
這篇文章主要介紹了vue3數(shù)據(jù)可視化實(shí)現(xiàn)數(shù)字滾動(dòng)特效,實(shí)現(xiàn)思路是使用Vue.component定義公共組件，使用window.requestAnimationFrame（首選，次選setTimeout）來循環(huán)數(shù)字動(dòng)畫，詳細(xì)代碼跟隨小編一起看看吧2022-09-09
前端vue面試總問watch和computed區(qū)別及建議總結(jié)
在現(xiàn)代前端的面試中,vue和react是面試過程中基本必問的技術(shù)棧,其中Vue響應(yīng)式話題,watch和computed是面試官非常喜歡聊的主題,雖然watch和computed它們都用于監(jiān)聽數(shù)據(jù)的變化,但它們?cè)趯?shí)現(xiàn)原理、使用場(chǎng)景和行為上有著顯著的區(qū)別,本文將深入探討,并提供一些面試過程中的建議2023-10-10
使用vue.js實(shí)現(xiàn)checkbox的全選和多個(gè)的刪除功能
這篇文章主要介紹了使用vue.js實(shí)現(xiàn)checkbox的全選和多個(gè)的刪除功能,需要的朋友可以參考下2017-02-02
vue實(shí)現(xiàn)商品列表的無限加載思路和步驟詳解
這篇文章主要介紹了vue實(shí)現(xiàn)商品列表的無限加載思路和步驟詳解,基礎(chǔ)思路是觸底條件滿足之后 page++,拉取下一頁(yè)數(shù)據(jù),結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下,2024-06-06
vue項(xiàng)目國(guó)際化vue-i18n的安裝使用教程
最近接觸學(xué)習(xí)Vue.js框架結(jié)合Element-ui組件開發(fā)項(xiàng)目。由于最近需要實(shí)現(xiàn)國(guó)際化功能，所以下面這篇文章主要介紹了vue項(xiàng)目國(guó)際化vue-i18n的使用的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考下。2018-03-03
vue+elementUI中el-radio設(shè)置默認(rèn)值方式
這篇文章主要介紹了vue+elementUI中el-radio設(shè)置默認(rèn)值方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-12-12
應(yīng)用provide與inject刷新Vue頁(yè)面方法
這篇文章主要介紹了應(yīng)用provide與inject刷新Vue頁(yè)面的兩種方法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，多多進(jìn)步，祝大家早日升職加薪2021-09-09
vue的路由動(dòng)畫切換頁(yè)面無法讀取meta值的bug記錄
這篇文章主要介紹了vue的路由動(dòng)畫切換頁(yè)面無法讀取meta值的bug記錄，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05