vue push時對象錯亂_談談Vue.use的原理

前言

❤️文章最後有福利哦！

使用過

Vue

的童鞋都見過這個

Vue.use()

的方法,但是有沒有想過為什麼這個方法需要這個方法來使用插件呢？

官方

介紹有4中四種為Vue添加全局功能的方法:

1.添加全局方法或 property

Vue.myGlobalMethod = function () {
    // 邏輯...
  }
複制代碼
           

2. 添加全局資源

Vue.directive('my-directive', {
    bind (el, binding, vnode, oldVnode) {
      // 邏輯...
    }
    ...
  })
複制代碼
           

3. 注入元件選項

Vue.mixin({
    created: function () {
      // 邏輯...
    }
    ...
  })
複制代碼
           

4. 添加執行個體方法

Vue.prototype.$myMethod = function (methodOptions) {
    // 邏輯...
  }
複制代碼
           

注意事項

• 1.通過全局方法

  Vue.use()

  使用插件。它需要在你調用

  new Vue()

  啟動應用之前完成
• 2.

  Vue.use

  會自動阻止多次注冊相同插件，屆時即使多次調用也隻會注冊一次該插件。

源碼

解讀源碼

這裡的參數

plugin

是指的是我們的

插件

,比如

ElementUI

,

Router

等,首先需要指出的是這裡的

this

是

Vue

構造器如下圖:

通過定義

_installedPlugins

對象如果之前注冊過取之前注冊過的

_installedPlugins

，否則是空數組。判斷這個插件是否存在

installedPlugins

裡面,如果存在結束，這就是

為什麼多次調用同一插件，插件隻會注冊一次

的原因。如果不存在,我們需要把他

push

進去，這裡再

push

之前做了

參數

處理。因為在使用

Vue.use()

的時候可以

傳入可選的選項對象

。

toArray

方法的作用是把類似數組的對象轉化成真正的數組,源碼如下圖:

可能有人不明白為什麼叫類似數組的對象呢？我們需要搞清楚

arguments

參數定義。

arguments

是一個對應于傳遞給函數的參數的類數組對象。

• args.unshift(this)

  向前添加

  this

  到

  args

  , 為什麼要把這個

  this

  放到

  args

  的第一個位置上呢？ 這個就和

  install

  的傳遞的參數有關系了,第一個參數是

  Vue構造器

  第二個參數是一個

  可選的選項options

• if (typeof plugin.install === 'function') { plugin.install.apply(plugin, args); } else if (typeof plugin === 'function') { plugin.apply(null, args); }

  這裡可以看到參數

  plugin

  在封裝的時候需要暴露一個

  install

  方法，或者自身是一個方法，不然是無法傳遞參數的

實戰

建立

plugin.js

檔案,建立

install

方法，我們把

clown

方法挂在

vue執行個體

上。

然後我們通過

Vue.use(Plugin)

使用,可以在

new Vue()

之後直接在this直接上調用。

調用結果如下:

如果本文對你有幫助的話可以點個『 贊』支援下哦 轉發到您的朋友圈

作者：小醜同學

著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。

❤️福利

該怎麼去面試大廠前端工程師？面試官都會這樣問你？附答案​www.jianshu.com