本文摘自PHP中文网,作者青灯夜游,侵删。
Vue.use到底是什么鬼、下面本篇文章就来给大家介绍一下Vue.use。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。
我们在使用Vue做项目开发的时候,看到不少轮子都是通过Vue.use
来进行使用,感觉甚是高大上。
不过Vue.use
到底是什么鬼?不妨来看个究竟。
其实这些轮子都可以称之为插件,它的功能范围没有严格的限制,一般包含如下几种:
- 添加全局方法或者属性。如:
vue-custom-element
- 添加全局资源:指令/过滤器/过渡/组件等。如
vue-touch
- 通过全局混入来添加一些组件选项。如
vue-router
- 添加
Vue
实例方法,通过把它们添加到Vue.prototype
上实现。 - 一个库,提供自己的 API,同时提供上面提到的一个或多个功能。如
vue-router
无论大小,插件要实现的功能无非就是上述这几种。但是,这并不妨碍我们创造出复杂的插件,不过我们还是希望给用户提供一个简单的使用方法,他不需要关注插件内部做了些什么。固Vue提供了use方法,专门来在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
里面,更加精简和可拓展性更高。
相关阅读 >>
更多相关阅读请进入《vue.js》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者