這篇文章將為大家詳細講解有關Vue.use指的是什么意思，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
成都創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務，包含不限于做網(wǎng)站、成都做網(wǎng)站、東安網(wǎng)絡推廣、微信小程序、東安網(wǎng)絡營銷、東安企業(yè)策劃、東安品牌公關、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運營等，從售前售中售后，我們都將竭誠為您服務，您的肯定，是我們最大的嘉獎；成都創(chuàng)新互聯(lián)為所有大學生創(chuàng)業(yè)者提供東安建站搭建服務，24小時服務熱線：18980820575，官方網(wǎng)址：www.cdcxhl.com
Vue具體輕量級框架、簡單易學、雙向數(shù)據(jù)綁定、組件化、數(shù)據(jù)和結(jié)構(gòu)的分離、虛擬DOM、運行速度快等優(yōu)勢，Vue中頁面使用的是局部刷新，不用每次跳轉(zhuǎn)頁面都要請求所有數(shù)據(jù)和dom，可以大大提升訪問速度和用戶體驗。
我們在使用Vue做項目開發(fā)的時候，看到不少輪子都是通過Vue.use來進行使用，感覺甚是高大上。
不過Vue.use到底是什么鬼？不妨來看個究竟。
其實這些輪子都可以稱之為插件，它的功能范圍沒有嚴格的限制，一般包含如下幾種：
添加全局方法或者屬性。如: vue-custom-element
添加全局資源：指令/過濾器/過渡/組件等。如 vue-touch
通過全局混入來添加一些組件選項。如 vue-router
添加 Vue 實例方法，通過把它們添加到 Vue.prototype 上實現(xiàn)。
一個庫，提供自己的 API，同時提供上面提到的一個或多個功能。如 vue-router
無論大小，插件要實現(xiàn)的功能無非就是上述這幾種。但是，這并不妨礙我們創(chuàng)造出復雜的插件，不過我們還是希望給用戶提供一個簡單的使用方法，他不需要關注插件內(nèi)部做了些什么。固Vue提供了use方法，專門來在new Vue()之前使用插件。
不管是官方提供的插件（例如vue-router、vuex），還是第三方的插件（例如ElementUI、ant）都是采用了此方式，不外乎插件內(nèi)部的功能不同而已。當然，還有其他諸多此類插件，awesome-vue 就集合了大量由社區(qū)貢獻的插件和庫。
接下來，我們就來看下這個神秘的use方法是如何實現(xiàn)的。
Vue.js 的插件應該暴露一個 install 方法。這個方法的第一個參數(shù)是 Vue 構(gòu)造器，第二個參數(shù)是一個可選的選項對象，用于傳入插件的配置：
重慶分公司
重慶分公司
MyPlugin.install = function (Vue, options) {
// 1. 添加全局方法或?qū)傩?
Vue.myGlobalMethod = function () {
// 邏輯...
}
// 2. 添加全局資源
Vue.directive('my-directive', {
bind (el, binding, vnode, oldVnode) {
// 邏輯...
}
...
})
// 3. 注入組件選項
Vue.mixin({
created: function () {
// 邏輯...
}
...
})
// 4. 添加實例方法
Vue.prototype.$myMethod = function (methodOptions) {
// 邏輯...
}
// 5. 注冊全局組件
Vue.component('myButton',{
// ...組件選項
})
}Vue.use(MyPlugin,{
// ...options
})一個插件內(nèi)部大概就是如上所示，其實也不外乎上述那幾種東西，甚是簡單??。接下來我們就來看下真實的案例ElementUI:
const components = [ Pagination, Dialog, Autocomplete/* 此處由于篇幅省略若干個組件 */];
const install = function(Vue, opts = {}) {
locale.use(opts.locale);
locale.i18n(opts.i18n);
// 注冊全局組件
components.forEach(component => {
Vue.component(component.name, component);
});
Vue.use(InfiniteScroll);
Vue.use(Loading.directive);
// 添加實例方法
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;
};
/* istanbul ignore if */
if (typeof window !== 'undefined' && window.Vue) {
install(window.Vue);
}
export default {
version: '2.13.0',
locale: locale.use,
i18n: locale.i18n,
install,
CollapseTransition,
Loading,
Pagination,
Dialog,
Autocomplete,
// ...other components
};我們不難發(fā)現(xiàn)，其實自己來實現(xiàn)一個插件也是超級簡單，只要對外暴露一個install方法即可，在使用Vue.use的時候，會調(diào)用這個方法。所以我們只要將要實現(xiàn)的內(nèi)容放到install內(nèi)部即可。這樣的好處就是插件需要一開始調(diào)用的方法都封裝在install里面，更加精簡和可拓展性更高。
大家可能也有注意到，這里的install其實是將所有的組件全部引入了。作為一個龐大的插件庫，這樣可能會有一些性能問題。用過的ElementUI的同學都知道，它是支持按需引入的，其實在上面的示例中也可以發(fā)現(xiàn)一些蛛絲馬跡。
const components = [ Pagination, Dialog, Autocomplete/* 此處由于篇幅省略若干個組件 */];
// ....省去中間內(nèi)容
export default {
version: '2.13.0',
locale: locale.use,
i18n: locale.i18n,
install,
CollapseTransition,
Loading,
Pagination,
Dialog,
Autocomplete,
// ...other components
};這里將每個組件都單獨都導出了，而在每個組件內(nèi)部，也類似的暴露了install來組件每個組件，這樣就可以單獨Vue.use每個組件，從而實現(xiàn)按需引入的目的。
import Alert from './src/main';
/* istanbul ignore next */
Alert.install = function(Vue) {
Vue.component(Alert.name, Alert);
};
export default Alert;除了上述內(nèi)容之外，還有幾點值得我們注意一下：
插件傳入的如果是一個對象，則執(zhí)行其install方法，如果是一個函數(shù)，則執(zhí)行它自身，并bind this為null，然后傳入額外的參數(shù)
if (typeof plugin.install === 'function') {
plugin.install.apply(plugin, args);
} else if (typeof plugin === 'function') {
plugin.apply(null, args);
}如果插件沒有被注冊過，那么注冊成功之后會給插件添加一個installed的屬性，其值為true。Vue.use方法內(nèi)部會檢測插件的installed屬性，從而避免重復注冊插件
Vue.use其實并不神秘，內(nèi)部還是我們平時使用的這些東西，僅僅只是給他們套上了一層高端的外衣而已。我們在開發(fā)中，也可以嘗試使用這種方式，不僅簡單，而且有逼格
關于“Vue.use指的是什么意思”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
