Vue.use和Vue.prototype的區別

今天打開Vue項目中main.js文件中，發現引入文件使用了兩種方式。

import Vue from 'vue'
import App from './App.vue'
import router from './router'

// 引入echarts
import echarts from 'echarts'
import 'echarts/map/js/china.js';
Vue.prototype.$echarts = echarts

// 將自動註冊全部組件爲全局組件
import dataV from '@jiaminghi/data-view'
Vue.use(dataV)

Vue.use和Vue.prototype這兩種方式引入包。那這兩種方式有什麼區別，既然困惑，那就本着刨根問底的心態，去了解下這兩種方式的不一樣。

1 Vue.use( plugin )

咱們先看下官方的解釋，

參數：{Object | Function} plugin

用法：安裝 Vue.js 插件。若是插件是一個對象，必須提供 install 方法。若是插件是一個函數，它會被做爲 install 方法。install 方法調用時，會將 Vue 做爲參數傳入。

該方法須要在調用 new Vue() 以前被調用。

當 install 方法被同一個插件屢次調用，插件將只會被安裝一次。

仍是看代碼比較直接，新建plugin文件夾，文件夾下新建plugin.js

var install = function(Vue) {
    Object.defineProperties(Vue.prototype, {
        $Plugin: {
            value: function() { console.log('I am a plugin') }
        }
    })
}
module.exports = install

main.js導入

// 測試插件
import Plugin from "./plugin/plugin"
Vue.use(Plugin)

使用插件

this.$Plugin()

2 Vue.prototype
這種就比較好理解了，好比咱們有個方法，

export const Plugin1 = (parameter1) => {
    console.log(parameter1)
}

全局都要使用，全局導入。

import { Plugin1 } from "./plugin/plugin"
Vue.prototype.Plugin1 = Plugin1

須要的地方調用

this.Plugin1("111")

這麼一對比，區別就很明顯了，什麼狀況下使用Vue.use，什麼狀況下使用Vue.prototype。

• 針對Vue編寫的插件用Vue.use導入

• 不是針對Vue編寫的插件用Vue.prototype導入

編寫插件能夠參考官方文檔：

https://cn.vuejs.org/v2/guide/plugins.html#ad