有關係嗎?

沒關係, 面試的時候總會問如何在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上看預覽

如果想知道插件的具體實現, 請看 cn.vuejs.org/v2/guide/p

總結

  1. Vue的插件是一個對象, 就像Element.
  2. 插件對象必須有install欄位.
  3. install欄位是一個函數.
  4. 初始化插件對象需要通過Vue.use().

擴展學習

  1. Vue.use()調用必須在new Vue之前.
  2. 同一個插件多次使用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組件 github.com/any86/vue-cr


推薦閱讀：
相關文章