vue.use和vue.prototype.$xxx的區別

Vue.prototype.$http = axios;和Vue.prototype.axios=axios的區別
一個this.$http.post(url,) 另外一個this.axios.post(url,)

1.vue.use
先看一下vue中文文檔是怎麼講解這個屬性的

官方文檔說的是，經過vue.use引入的插件，能夠理解爲本身定義的方法或者引入的Eelment ui組件,可能不少人不理解Element ui怎麼和vue.use插件扯上關係了，不要緊，咱們如今vscode裏引入一下Element ui

發現這裏面有一個install，若是看不懂不要緊，反正我本身也沒看的很懂

這裏咱們看到Element是個對象, 上面有version等字段, 其中還有一個install,他是本文的主角, Vue.use就是要運行這個install對應的函數.

當vue.use引入了element ui以後，能夠經過this.$xxx 這個xxx就是element ui的對象方法,好比：

這樣子就能夠點出Element ui相對應的組件

或者再簡單一下

// 插件
const plugin = {
  install(){
    document.write('我是install內的代碼')
  }
}

// 初始化插件
Vue.use(plugin); // 頁面顯示"我是install內的代碼"

 

可能有人有疑問爲何我這個直接Vue.use就會直接調用了這個Install方法,請往上翻翻插件講解，官方文檔明確表示了若是插件是一個install對象，那麼你就必須提供install這個方法，那麼在Vue.use()引入的時候就天然而然會去調用這個install方法了.

就是說明他必須在new vue這個方法以前去調用，不然失敗。

總結
Vue的插件是一個對象, 就像Element.
插件對象必須有install字段.
install字段是一個函數.
初始化插件對象須要經過Vue.use()

2.Vue.prototype.$xxx

接下來咱們看一下prototype.$xxx這個屬性，首先看一段代碼

import utils from '@/pages/util/utils'
Vue.prototype.$util=utils

是否是以爲很熟悉,可是你們有時候會以爲頗有疑問,爲何初始化的時候運行了Vue.prototype.$utils, 而後就能夠在任意組件內部運行this.$utils()了呢? 

每個vue組件都是Vue的實例，因此組件內this能夠拿到Vue.prototype上添加的屬性和方法。

簡而言之，就是說，你在當前項目中，可能會用到不少的工具方法，公共方法，可是你不想去污染全局的一個做用域或者每一個組建中重複寫一樣的方法，那麼就能夠經過vue.prototype去定義成他的實例對象.

好比：

export default {
    dataURLtoFile(dataurl, filename) { //將base64轉換爲文件
        var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
            bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
        while (n--) {
            u8arr[n] = bstr.charCodeAt(n);
        }
        return new File([u8arr], filename, { type: mime });
    },
    //文件轉換爲base64
    file_base(file, name) {
        return new Promise((resolve, reject) => {
            var file_reader = new FileReader();
            file_reader.onload = (function () {
                resolve(this.result);//返回
            });
            file_reader.readAsDataURL(file);
        });
    },
}

這是我寫的一個utils.js方法，經過exprot defalut導出全局的默認方法，光導出還不夠，還須要在main.js中去引入,

那麼如何去使用呢?簡單，在vue組件內的方法中經過this.$utils.xxx便可調用utils中的方法了.

比如這樣的調用,只關注矩形圈出來的，後面的.then不用看，由於我對這個方法作了promise的處理!