Vue入坑史,插件系统详解

  • Kevin
  • 23 Minutes
  • 2017年8月10日

越是让你感觉到害怕的事情,就越要去面对它。

什么是插件

Vue的插件一般就是用来扩展Vue的功能。比如,当需要Vue实现Ajax请求功能,我们希望通过this.$get(url)的形式就可以发送一个get请求。那么,我们就需要给Vue的实例添加一个$get方法,Vue实例本身是没有这个方法的。

Vue的一些插件:

如何使用插件

在创建Vue实例之前,通过全局方法Vue.use()来使用插件:

1
2
3
4
5
// 使用 MyPlugin 插件
Vue.use(MyPlugin)

// 或 传入一个选项参数,options 一般是一个对象
Vue.use(MyPlugin, options)

是不是很简单,好像也没有什么好说的。

有时候,我们看到某些插件使用起来可能有些不一样。比如使用vuex

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// store.js 文件中
import Vuex from 'vuex'
import Vue from 'vue'
import state from './state'
import mutations from './mutations'
import actions from './actions'

// 注册插件
Vue.use(Vuex)

const store = new Vuex.Store({
state,
mutations,
actions
})

export default store
1
2
3
4
5
6
7
8
9
10
// main.js 文件中
import Vue form 'vue'
import App from './App'
import store from './store'

new Vue({
el: '#app',
store,
render: h => h(App)
})

其实本质上还是一样的,也是通过Vue.use()方法注册插件。只不过它有一个store对象,然后并将store对象作为Vue根实例的属性,以便组件通过this.$store这种形式来访问。

自定义插件

其实当通过Vue.use()注册插件时,内部会自动调用插件的install()方法。也就是说,插件必须要提供一个公开的install()方法,作为接口。该方法第一个参数是Vue,第二个参数是可选的options对象。

总结起来说,插件是一个对象。该对象要有一个公开的install()方法,那么写起来可能是这样的:

1
2
3
4
5
6
const MyPlugin = {}
MyPlugin.install = function (Vue, options) {
// ...
}

export default MyPlugin

install()方法中,我们通过参数可以拿到Vue对象,那么,我们就可以对它做很多事情。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
MyPlugin.install = function (Vue, options) {
// 1. 添加全局方法和属性
Vue.myProperty = 'Hello Vue',

// 2. 添加全局的自定义指令
Vue.directive('name', function (el, binding) {
// ...
})

// 3. 混合
Vue.mixin({
created () {
// ...
}
})

// 4. 添加实例方法
// 通过原型为一个对象添加实例方法
// 在 Vue 实例中,通过 this.$get() 就可以调用该方法
Vue.prototype.$get = function () {
// ...
}
}

插件的几种写法

这里直接就看几个插件的源码吧,看看他们是怎么写的,其实我也是参照了这些源码才真正弄明白了插件是怎么一回事。源码很长,这里只说一些关键点。

vue-touch

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// 外面是一个立即执行函数,控制作用域
// 前面的分号应该是为了更好的兼容其他js源码吧
;(function () {
var vueTouch = {}

// 这里没有接收第二个参数
vueTouch.install = function (Vue) {
// ...
}

// 导出 vueTouch 插件
if (typeof exports == "object") {
module.exports = vueTouch
} else if (typeof define == "function" && define.amd) {
define([], function(){ return vueTouch })
} else if (window.Vue) {
// 如果 Vue 作为全局对象,则自动使用插件
// 也就是说,当我们在HTML文档中通过script直接引用 vue 和 vueTouch 时,不需要手动注册
window.VueTouch = vueTouch
Vue.use(vueTouch)
}
})()

vue-router

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import { install } from './install'

export default class VueRouter {
// 定义了一个静态方法, ES6 新增的语法
// 用其他语言理解也就相当于一个类方法,通过类名调用
static install: () => void
}

// 这里 install 是一个从外部引入的函数
VueRouter.install = install

// 自动注册插件
if (inBrowser && window.Vue) {
window.Vue.use(VueRouter)
}

vuex

1
2
3
4
5
6
7
import { Store, install } from './store'

export default {
install,
// ...
}
// 这个最简单直观,没啥好说的

vue-resource(重点)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 这个。。。
// 我也不知道如何解释
// 这里好像直接用 plugin 代替了 install 方法
// 当使用 Vue.use(vueResource) 时,会调用该函数 ???
// 先暂且这么认为吧
function plugin(Vue) {
// 避免重复注册
if (plugin.installed) {
return
}

// ...
}

// 自动注册插件
if (typeof window !== 'undefined' && window.Vue) {
window.Vue.use(plugin);
}

export default plugin;

Vue.use源码解读(一点要看)

针对vue-resource插件问题,我查看了一下vue的源码,它的源码是这样的:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
Vue.use = function (plugin: Function | Object) {
/* istanbul ignore if */
// 保证同一个插件只安装一次
if (plugin.installed) {
return
}
// additional parameters
// 这句的作用应该是去掉第一个参数,然后转换成数组
const args = toArray(arguments, 1)
// 将Vue作为数组的第一个元素,以便传入插件中
args.unshift(this)
// 插件有install接口,并且是一个函数
if (typeof plugin.install === 'function') {
// 在plugin作用域下调用 install ,并传入拼接好的参数
// 在 install 中,this 指向 plugin
plugin.install.apply(plugin, args)

// 插件本身是一个函数
// 解释vue-resource写法的关键点在这
} else if (typeof plugin === 'function') {
// 在全局作用域下调用 plugin 函数
// plugin 中,this 指向 window
plugin.apply(null, args)
}
plugin.installed = true
return this
}

通过源码,我们知道,Vue插件可以是一个对象或者是一个函数。只有当插件实现了 install 接口时(有install这个函数时),才会调用插件的install方法;否则再判断插件本身是否是一个函数,如果是,就直接调用它。

现在就能很好的解释vue-resource插件的写法了。好吧,我也是刚刚得知,又长了一点见识。

其实官网也有说明

Vue.use(plugin)