use vue 多个_浅谈Vue.use到底是什么鬼

我们在使用Vue做项目开发的时候，看到不少轮子都是通过Vue.use来进行使用，感觉甚是高大上。jdy免费资源网

不过Vue.use到底是什么鬼？不妨来看个究竟。jdy免费资源网

其实这些轮子都可以称之为插件，它的功能范围没有严格的限制，一般包含如下几种：jdy免费资源网添加全局方法或者属性。如: vue-custom-element 添加全局资源：指令/过滤器/过渡/组件等。如 vue-touch 通过全局混入来添加一些组件选项。如 vue-router 添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现。 一个库，提供自己的 API，同时提供上面提到的一个或多个功能。如 vue-router

无论大小，插件要实现的功能无非就是上述这几种。但是，这并不妨碍我们创造出复杂的插件，不过我们还是希望给用户提供一个简单的使用方法，他不需要关注插件内部做了些什么。固Vue提供了use方法，专门来在new Vue()之前使用插件。jdy免费资源网

不管是官方提供的插件(例如vue-router、vuex)，还是第三方的插件(例如ElementUI、ant)都是采用了此方式，不外乎插件内部的功能不同而已。当然，还有其他诸多此类插件，awesome-vue 就集合了大量由社区贡献的插件和库。jdy免费资源网

接下来，我们就来看下这个神秘的use方法是如何实现的。jdy免费资源网

Vue.js 的插件应该暴露一个 install 方法。这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象，用于传入插件的配置：jdy免费资源网

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

})

一个插件内部大概就是如上所示，其实也不外乎上述那几种东西，甚是简单