Vue經典面試題: Vue.use和Vue.prototype.$xx有血緣關係嗎? 有關係嗎? 沒關係, 面試的時候總會問如何在Vue的實例上掛載一個方法/屬性, 也就是Vue.prototype的小技巧, 但是突然有人問他倆有啥關係還真是新鮮. 我想應該是網上有文章寫Vue.prototype.$xx是用法的, 但是沒有說明Vue.use的用法以及Vue.prototype.$xx為什麼就能在組件內this.$xx 這麼調用, 所以下面我就細細的說下. 說能學會啥? 看完本文, 能掌握如何定義一個Vue插件, 以及Vue.prototype.$xx的原理. Vue.use 用餓了麼UI舉例 下面是餓了麼UI的引入代碼, 大家對這段應該很熟悉了.import Vue from vue import Element from element-ui Vue.use(Element) 接下來, 我們在看下這個Element是什麼 這裡我們看到Element是個對象, 上面有version等欄位, 其中還有一個install,他是本文的主角, Vue.use就是要運行這個install對應的函數. 最小結構 寫一段最少的代碼演示如何用Vue.use初始化插件:// 插件 const plugin = { install(){ document.write(我是install內的代碼) } } // 初始化插件 Vue.use(plugin); // 頁面顯示"我是install內的代碼" 在codepen上看預覽如果想知道插件的具體實現, 請看 https://cn.vuejs.org/v2/guide/plugins.html 總結 Vue的插件是一個對象, 就像Element. 插件對象必須有install欄位. install欄位是一個函數. 初始化插件對象需要通過Vue.use(). 擴展學習 Vue.use()調用必須在new Vue之前. 同一個插件多次使用Vue.use()也只會被運行一次. Vue.prototype.$xx 好了, 回過頭我們再看眼上面的圖片, 是不是發現了熟悉的代碼: Vue.prototype.$loading = Loading.service; Vue.prototype.$msgbox = MessageBox; Vue.prototype.$alert = MessageBox.alert; ... Vue.prototype 的用法我相信大家都會用, 我做過調查, 我就不囉嗦了, 但是我發現大家好像不知道"所以然". 所以然 為什麼初始化的時候運行了Vue.prototype.$alert, 然後就可以在任意組件內部運行this.$alert()了呢? 首先要了解構造函數, 實例, 原型(prototype)這3個概念. 構造函數, 實例, 原型(prototype) 這3個概念有點老生常談了, 百度一搜很多解釋, 我先舉個例子來和Vue類比你就明白他倆了.首先我寫個假的Vue我們叫他AVue, 恩, 他是個"贗品", "A貨", 接下來跟我一步一步走: 1. AVue是個構造函數 這裡我們只模擬下methods功能.function AVue({methods}){ for(let key in methods){ this[key] = methods[key]; } } 2. 給AVue的原型上放個$alert AVue.prototype.$alert = ()=>{document.write(我是個贗品!)} 3. 實例化AVue 實例化Vue的時候我們知道, 我們會傳入一個對象, 對象裡面有data/methods等, 我的AVue一樣, 下面我們讓AVue也學Vue那樣實例化:// 我只山寨了methods, 所以只能學methods嘍 const av = new AVue({ methods: { say(){ this.$alert(); } } }); // 調用一下say av.say(); // 我是個贗品! 在codepen上預覽 總結 好了, 運行到這裡, 我想你應該看明白了吧, 之前大家寫的Vue.prototype.$xx其實只不過是js中函數原型的特性罷了: 函數原型上的屬性/方法, 在函數實例化後, 可以在任意實例上讀取, 要不你也做個"贗品"試下. 擴展 vue讓大家知道了defineProperty, 我們自己也可以用下他, 比如讓Vue.prototype變成不可寫的, 防止被覆蓋.Object.defineProperty(Vue.prototype, $alert, { writable: false, value(){ console.log(我是行貨!) } }); 課後練習 建議大家可以隨便寫一個vue的插件練手, 比如我的練手項目就是他::lollipop:命令式調用vue組件 https://github.com/any86/vue-create-root 推薦閱讀: 相關文章 {{#data}} {{title}} {{/data}}