vue.use()分析

目錄

一、官網介紹

1.1 vue.use介紹

1.2 開發插件

二、分析源碼

三、幾個例子

3.1 echarts 用 Vue.use() 來注冊

3.2 全局元件用 Vue.use() 來注冊

一、官網介紹

1.1 vue.use介紹

在做 vue 開發的時候大家一定經常接觸 

Vue.use()

 方法，官網給出的解釋是: 

通過全局方法 

Vue.use()

 使用插件。它需要在你調用 

new Vue()

 啟動應用之前完成：

// 調用 `MyPlugin.install(Vue)`
Vue.use(MyPlugin)

new Vue({
  // ...元件選項
})
           

也可以傳入一個可選的選項對象：

Vue.use(MyPlugin, { someOption: true })
           

Vue.use

 會自動阻止多次注冊相同插件，屆時即使多次調用也隻會注冊一次該插件。

Vue.js 官方提供的一些插件 (例如 

vue-router

) 在檢測到 

Vue

 是可通路的全局變量時會自動調用 

Vue.use()

。然而在像 CommonJS 這樣的子產品環境中，你應該始終顯式地調用 

Vue.use()

：

// 用 Browserify 或 webpack 提供的 CommonJS 子產品環境時
var Vue = require('vue')
var VueRouter = require('vue-router')

// 不要忘了調用此方法
Vue.use(VueRouter)
           

1.2 開發插件

Vue.js 的插件應該暴露一個 

install

 方法。這個方法的第一個參數是 

Vue

 構造器，第二個參數是一個可選的選項對象：

MyPlugin.install = function (Vue, options) {
  // 1. 添加全局方法或 property
  Vue.myGlobalMethod = function () {
    // 邏輯...
  }

  // 2. 添加全局資源
  Vue.directive('my-directive', {
    bind (el, binding, vnode, oldVnode) {
      // 邏輯...
    }
    ...
  })

  // 3. 注入元件選項
  Vue.mixin({
    created: function () {
      // 邏輯...
    }
    ...
  })

  // 4. 添加執行個體方法
  Vue.prototype.$myMethod = function (methodOptions) {
    // 邏輯...
  }
}
           

二、分析源碼

Vue.use()

 的源碼，首先看 src/core/global-api/use.js 下 

Vue.use()

 方法的定義：

/* @flow */

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

export function initUse (Vue: GlobalAPI) {
  Vue.use = function (plugin: Function | Object) { //參數plugin插件
    const installedPlugins = (this._installedPlugins || (this._installedPlugins = [])) //擷取已注冊插件
    if (installedPlugins.indexOf(plugin) > -1) { //防止重複注冊
      return this
    }

    // additional parameters
    const args = toArray(arguments, 1)
    // toArray 方法的作用就是把第一個 Array 參數從下标為1截取到最後。
    // 也就拿到了 Vue.use() 方法除去第一個之外的其他參數，
    // 這些參數準備在調用 instll 方法的時候傳入。
    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
  }
}
           

上面源碼中使用了工具函數 

toArray

 ，該函數定義在 src/shared/util.js

toArray 方法的作用就是把第一個 Array 參數從下标為1截取到最後。也就拿到了 

Vue.use()

 方法除去第一個之外的其他參數，這些參數準備在調用 instll 方法的時候傳入。

export function toArray (list: any, start?: number): Array<any> {
  start = start || 0
  let i = list.length - start
  const ret: Array<any> = new Array(i)
  while (i--) {
    ret[i] = list[i + start]
  }
  return ret
}
           

三、幾個例子

3.1 echarts 用 Vue.use() 來注冊

main.js

import Vue from 'vue'
import echarts from './echarts.js'
Vue.use(echarts)

new Vue({
  ...
})
           

echarts.js

import Echarts from 'echarts'
export default {
  install(Vue){
    Vue.prototype.$echarts = Echarts
  }
}
           

這樣寫的好處是可以在 install 的檔案裡做更多配置相關的工作，main.js 不會變的臃腫，更友善管理。

3.2 全局元件用 Vue.use() 來注冊

base.js

import a from './a'
import b from './b'
let components = { a, b }
const installBase = {
  install (Vue) {
    Object.keys(components).map(key => Vue.component(key, components[key]))
  }
}
           

main.js

import Vue from 'vue'
import base from './base.js'
Vue.use(base)

new Vue({
  ...
})