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的處理!