Vue.use到底是什麼鬼、下面這篇文章就來跟大家介紹一下Vue.use。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。
我們在使用Vue做專案開發的時候，看到不少輪子都是透過Vue.use來進行使用，感覺甚是高大上。
不過Vue.use到底是什麼鬼？不妨來看個究竟。
其實這些輪子都可以稱之為插件，它的功能範圍沒有嚴格的限制，一般包含以下幾種：
實例方法，透過將它們加入 Vue.prototype 上實作。
new Vue()之前使用外掛程式。
vue-router、vuex），或是第三方的外掛程式（例如ElementUI、ant）都是採用了此方式，不外乎外掛內部的功能不同而已。當然，還有其他許多此類插件，awesome-vue 就集合了大量由社群貢獻的插件和函式庫。
use方法是如何實現的。
Vue.js 的外掛程式應該要揭露一個 install 方法。這個方法的第一個參數是Vue 建構器，第二個參數是一個可選的選項對象，用來傳入插件的配置：
MyPlugin.install = function (Vue, options) {
// 1. 添加全局方法或属性
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
})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
};install方法即可，使用Vue.use的時候，會呼叫這個方法。所以我們只要將要實現的內容放到install內部即可。這樣的好處就是外掛程式需要一開始呼叫的方法都封裝在install裡面，更加精簡和可拓展性更高。
install其實是將所有的元件全部引入了。作為一個龐大的插件庫，這樣可能會有一些效能問題。用過的ElementUI的同學都知道，它是支援按需引入的，其實在上面的範例中也可以發現一些蛛絲馬跡。
const components = [ Pagination, Dialog, Autocomplete/* 此处由于篇幅省略若干个组件 */];
// ....省去中间内容
export default {
version: '2.13.0',
locale: locale.use,
i18n: locale.i18n,
install,
CollapseTransition,
Loading,
Pagination,
Dialog,
Autocomplete,
// ...other components
};install來組件每個組件，這樣就可以單獨 Vue.use每個元件，從而實現按需引入的目的。
import Alert from './src/main';
/* istanbul ignore next */
Alert.install = function(Vue) {
Vue.component(Alert.name, Alert);
};
export default Alert;方法，如果是函數，則執行它自身，並bind this為null，然後傳入額外的參數if (typeof plugin.install === 'function') {
plugin.install.apply(plugin, args);
} else if (typeof plugin === 'function') {
plugin.apply(null, args);
}的屬性，其值為true。 Vue.use方法內部會偵測外掛程式的installed屬性，以避免重複註冊外掛程式
Vue.use其實並不神秘，內部還是我們平常使用的這些東西，僅僅只是給他們套上了一層高端的外衣而已。我們在開發中，也可以嘗試使用這種方式，不僅簡單，而且有逼格。
相關推薦：更多程式相關知識，請造訪：
程式設計入門！ ！
以上是淺談Vue.use到底是什麼？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
