什么是插件

Vue的插件一般就是用來擴展Vue的功能。比如，當需要Vue實現Ajax請求功能，我們希望通過this.$get(url)的形式就可以發送一個get請求。那么，我們就需要給Vue的實例添加一個$get方法，Vue實例本身是沒有這個方法的。

Vue的一些插件：

vuex：官方狀態管理插件；

vue-router：官方路由插件；

vue-resource：Ajax請求插件；

vue-element：餓了么出品的組件庫。

如何使用插件

在創建Vue實例之前，通過全局方法Vue.use()來使用插件：

// 使用 MyPlugin 插件

Vue.use(MyPlugin)

// 或 傳入一個選項參數，options 一般是一個對象

Vue.use(MyPlugin, options)

是不是很簡單，好像也沒有什么好說的。

有時候，我們看到某些插件使用起來可能有些不一樣。比如使用vuex：

// 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// 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()方法，那么寫起來可能是這樣的：

const MyPlugin = {}

MyPlugin.install = function (Vue, options){

// ...

}

export default MyPlugin

在install()方法中，我們通過參數可以拿到Vue對象，那么，我們就可以對它做很多事情。

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// 外面是一個立即執行函數，控制作用域

// 前面的分號應該是為了更好的兼容其他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-routerimport { install } from './install'

export default class VueRouter{

// 定義了一個靜態方法， ES6 新增的語法

// 用其他語言理解也就相當于一個類方法，通過類名調用

static install: () => void

}

// 這里 install 是一個從外部引入的函數

VueRouter.install = install

// 自動注冊插件

if (inBrowser && window.Vue) {

window.Vue.use(VueRouter)

}

vueximport { Store, install } from './store'

export default {

install,

// ...

}

// 這個最簡單直觀，沒啥好說的

vue-resource(重點)// 這個。。。

// 我也不知道如何解釋

// 這里好像直接用 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的源碼，它的源碼是這樣的：

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插件的寫法了。好吧，我也是剛剛得知，又長了一點見識。

其實官網也有說明：

總結

以上是生活随笔為你收集整理的use vue 多个_vue.use 插件系统详解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。