Vue.use指的是什么意思

这篇文章将为大家详细讲解有关Vue.use指的是什么意思,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

成都创新互联专注为客户提供全方位的互联网综合服务,包含不限于做网站、成都做网站、东安网络推广、微信小程序、东安网络营销、东安企业策划、东安品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等,从售前售中售后,我们都将竭诚为您服务,您的肯定,是我们最大的嘉奖;成都创新互联为所有大学生创业者提供东安建站搭建服务,24小时服务热线:18980820575,官方网址:www.cdcxhl.com

Vue的优点

Vue具体轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快等优势,Vue中页面使用的是局部刷新,不用每次跳转页面都要请求所有数据和dom,可以大大提升访问速度和用户体验。

我们在使用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里面,更加精简和可拓展性更高。

大家可能也有注意到,这里的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;

除了上述内容之外,还有几点值得我们注意一下:

插件传入的如果是一个对象,则执行其install方法,如果是一个函数,则执行它自身,并bind this为null,然后传入额外的参数

if (typeof plugin.install === 'function') {
 plugin.install.apply(plugin, args);
} else if (typeof plugin === 'function') {
 plugin.apply(null, args);
}

如果插件没有被注册过,那么注册成功之后会给插件添加一个installed的属性,其值为true。Vue.use方法内部会检测插件的installed属性,从而避免重复注册插件

Vue.use其实并不神秘,内部还是我们平时使用的这些东西,仅仅只是给他们套上了一层高端的外衣而已。我们在开发中,也可以尝试使用这种方式,不仅简单,而且有逼格

关于“Vue.use指的是什么意思”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。


当前名称:Vue.use指的是什么意思
本文路径:http://scyanting.com/article/godsjh.html