use vue 多个_Vue.use 详解

一，基本用法

插件通常为 Vue 来添加全局功能。而插件的应用范围没有明确规定，一般包括：

添加全局方法或属性。例如：vue-custom-element

添加全局资源：指令/过滤器/过渡等。如：v-touch

通过全局混入来添加一些组件选项。如：vue-router

添加 Vue 实例方法，通过把他们添加到 Vue.prototype 上实现

一个库，提供自己的 API，同时提供上面提到的一个或多个功能。如：vue-router

开发一个插件需要暴露一个 install方法。这个方法的第一个参数是 Vue 构造器，第二个参数一个可选的选项对象。

编写一个组件：

import LoadingComponent from './LoadingComponent.vue';

const MyPlugin = {};

MyPlugin.install = function(Vue, options) {

// 1, 添加全局方法或属性

Vue.myGlobalVariable = "hahha";

Vue.myGlobalMethods = function(){ //... }

// 2, 添加全局资源

// 注册一个全局组件 `loading`, 不用 `import` 可以在任何位置使用

Vue.component('Loading', LoadingComponent)

Vue.directive('my-directive', {

bind(el, binding, vnode, oldnode){ // logic }

})

// 3, mixins

Vue.mixin({

created(){ // logic },

mounted(){ // logic }

})

// 4, 在原型上添加实例方法，被各个实例继承

Vue.prototype.$MyMethods = function(mOptions) { // logic }

}

把 Vue 引到一个新的位置，添加全局方法，组件，属性等内容，其实这些内容也可以通过其他方式写，那么这个API的用处在哪儿

如何使用：

// MyPlugin.vue

// 2, 添加全局资源 (无需引入，可全局使用的组件)

export default {

// other logic

mounted(){

// 1, 添加全局方法或属性 (TODO: 这种方式似乎不能访问 ？？？？？？)

const myGlobalVariable = this.myGlobalVariable; // undefined

this.myGlobalMethods(); // "this.myGlobalMethods is not a function"

// 3, mixins

// 4, 在原型上添加实例方法，被各个实例继承

this.$MyMethods(); // run logic

}

}

二，源码解析

// ./vue/src/core/global-api/use.js

import { toArray } from "../utils/index";

/* @flow */

import { toArray } from '../util/index'

export function initUse (Vue: GlobalAPI) {

// `plugin: Function | Object` 这种使FLOW写法，facebook 出品的一款Javascript静态类型检查工具。

// use 方法接受的参数为 function 或 object, 若为function, 默认为 install 方法，若为object, 里面必 须含有一个install 方法。

Vue.use = function (plugin: Function | Object) {

const installedPlugins = (this._installedPlugins || (this._installedPlugins = []))

// 插件只能注册一次

if (installedPlugins.indexOf(plugin) > -1) {

return this

}

// 处理附加参数

// `toArray`: arguments是参数列表的一个类数组(不知道是不是这么说)，toArray 将它转变成一个真的数组，截取除第一以外的所有参数。 ① 这些参数会在调用install 方法时传入；

const args = toArray(arguments, 1)

args.unshift(this)

if (typeof plugin.install === 'function') {

plugin.install.apply(plugin, args)

} else if (typeof plugin === 'function') {

plugin.apply(null, args)

}

installedPlugins.push(plugin)

return this

}

}

所以我们总结下，Vue.use 的好处：

统一在一个位置注册全局内容，避免main.js过度臃肿；

全局注册，避免重复引入问题；

避免重复注册组件。

三，常见的几种用法

mixins

// 一个简单的栗子，可以用于 validation

const myMixin = {

install(Vue, options) {

// 这里 this 指向 myMixin

Vue.mixin({

// 每个组件创建都会执行 created 方法

created(){

const rules = this.$options.rules || null;

if(rules) {

Object.keys(rules).forEach(key => {

const ruleItem = rules[key];

// $watch 接受两个参数：监测的属性名，callback(变化后的值)

this.$watch(key, newValue => {

const isValid = ruleItem.validate(newValue);

if(!isValid) {

console.log(ruleItem.message)

}

})

})

}

}

})

}

}

const vue = new Vue({

data: {

foo: 10

},

// 检验规则 ③

rules: {

foo: {

validate: value => value > 1,

message: "foo 必须大于 1"

}，

// more rules

}

})

// * 需要注意的是, ③处的 rules 只能在根组件通过 this.options.rules 访问，子组件的话得看嵌套关系，可能是 this.$options.parent.$options....parent.$options.rules 这种方式访问该属性

directives

// 注册一个全局自定义指令：`v-focus`

// plugin 内部

function Myplugin(Vue){

Vue.directive('focus', {

// 当被绑定元素插入到DOM中时，自动聚焦

inserted(el){

el.focus();

}

})

}

// template 内部

// 自动聚焦

axios

axios 不能直接用Vue.use, 以为它本身没有暴露 install 方法。所以使用axios只能是下面两种方法：

使用的地方进行 import：

import axios from 'axios';

export const login = params => {

return axios

.post(`localhost:3000/login`, params)

.then(res => res)

}

使用 vue-axios :

// npm i -S axios vue-axios

// main.js

import Vue from 'vue';

import axios from 'axios';

import VueAxios from 'vue-axios';

// 由之前的 `vue.use` 用法我们知道，它可以接收第二个 `options` 参数，所以这里本质是将 `axios` 通过 `VueAxios` 包装以符合 "install 规范"

Vue.use(VueAxios, axios);

// usage

this.axios.get(params).then(res => res);

Vue.axios.get(params).then(res => res);

this.$http.get(params).then(res => res);

vue-router

// ./route/index.js

import Router from 'vue-router';

Vue.use(Router);

let router = new Router({

routes: [

{

path: "./home",

component: homeComp

}

]

})

export default router;

// main.js

import router from ....;

const vue = new Vue({

// other logic

router

})

Vuex

用法与vue-router 等同，不赘述

四，常见问题

为什么要先 Vue.use 再 new Vue() ?

首先回顾下 Vue.use 做了什么：

检测是否注册过此插件

插件注入到 Vue 构造函数 (TODO：不知道是不是这么说)

存储注册过的插件

而在 new Vue(options) 时，会执行 Vue.prototype._init 进行初始化，将Vue 本身属性与options合并，然后进行事件，生命周期初始化。(比如：vue-router, vuex 等需要将 store, router 选项插入options)

所以，如果 Vue.use 在 new Vue() 之前执行，那么调用_init()时，插件中使用的内容还没有注入到 Vue.options.component, Vue.options.directives 等属性中，初始化的实例也无从访问。