Vue.use()在new Vue() 之前使用的原因淺析

更新時(shí)間：2019年08月26日 09:41:30 作者：獼猴桃豆老大

本文通過(guò)實(shí)例代碼給大家介紹了為什么Vue.use()在new Vue() 之前使用,需要的朋友可以參考下

使用Vue前端框架開(kāi)發(fā)有些時(shí)間了，官方文檔對(duì)于插件開(kāi)發(fā)也有詳細(xì)的介紹。最近強(qiáng)迫癥犯了，老在想為什么Vue.use函數(shù)執(zhí)行，要在Vue實(shí)例化即new Vue(options)之前。解鈴還須系鈴人，這個(gè)問(wèn)題只能通過(guò)看源碼解決，于是。。。

先看Vue.use做了什么

Vue.use = function (plugin: Function | Object) {
  //Vue構(gòu)造函數(shù)上定義_installedPlugins 避免相同的插件注冊(cè)多次
  const installedPlugins = (this._installedPlugins || (this._installedPlugins = []))
  // import是單例模式
  //所以plugin不論是Fuction還是Object同一個(gè)插件都是同一個(gè)
  if (installedPlugins.indexOf(plugin) > -1) {
   return this
  }

  // additional parameters
  const args = toArray(arguments, 1)
  // Vue作為第一個(gè)參數(shù)傳遞給插件
  args.unshift(this)
  if (typeof plugin.install === 'function') {
   plugin.install.apply(plugin, args)
  } else if (typeof plugin === 'function') {
   plugin.apply(null, args)
  }
  installedPlugins.push(plugin)
  return this // 返回的是this,可以鏈?zhǔn)秸{(diào)用
 }

do:

檢查插件是否已經(jīng)注冊(cè)，相同的插件只注冊(cè)一次
將Vue構(gòu)造函數(shù)作為第一個(gè)參數(shù)，作為插件注冊(cè)調(diào)用
根據(jù)插件形式選擇調(diào)用plugin.install還是plugin
存儲(chǔ)已注冊(cè)插件，用于插件是否已注冊(cè)檢驗(yàn)

Vue.prototype._init中合并options
Vue.prototype._init = function (options?: Object) {
  const vm: Component = this
  // a uid
  vm._uid = uid++
  let startTag, endTag
  ...
  vm.$options = mergeOptions(
    resolveConstructorOptions(vm.constructor),
    options || {},
    vm
   )
   ...
   // 掛載到dom上
  if (vm.$options.el) {
   vm.$mount(vm.$options.el)
  }
}

在new Vue(options)時(shí)首先會(huì)執(zhí)行this._init進(jìn)行初始化，將Vue上的屬性和options進(jìn)行合并，然后在進(jìn)行事件、生命周期等的初始化。beforeCreate,created生命周期的hook函數(shù)也是在這里進(jìn)行調(diào)用

如果Vue.use在new Vue()之后執(zhí)行，this._init()時(shí)你使用的插件的內(nèi)容還沒(méi)有添加到Vue.options.components、Vue.options.directives、Vue.options.filters等屬性中。所以新初始化的Vue實(shí)例中也就沒(méi)有插件內(nèi)容

總結(jié)

以上所述是小編給大家介紹的Vue.use()在new Vue() 之前使用的原因淺析,希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

您可能感興趣的文章:

相關(guān)文章

詳解el-table表頭文字換行的三種方式
本文主要介紹了el-table表頭文字換行的三種方式，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-11-11
vue項(xiàng)目部署跨域問(wèn)題的詳細(xì)解決過(guò)程
一般我們的前端Vue項(xiàng)目中都會(huì)涉及到跨域的問(wèn)題,下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目部署跨域問(wèn)題的詳細(xì)解決過(guò)程,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-05-05
vue+axios+promise實(shí)際開(kāi)發(fā)用法詳解
這篇文章主要介紹了vue+axios+promise實(shí)際開(kāi)發(fā)用法詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-10-10
詳解如何在vue-cli中使用vuex
這篇文章主要介紹了詳解如何在vue-cli中使用vuex，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-08-08
vue el-table實(shí)現(xiàn)遞歸嵌套的示例代碼
本文主要介紹了vue el-table實(shí)現(xiàn)遞歸嵌套的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2022-08-08
vue中內(nèi)網(wǎng)/局域網(wǎng)/離線的情況下使用及建立項(xiàng)目方式
這篇文章主要介紹了vue中內(nèi)網(wǎng)/局域網(wǎng)/離線的情況下使用及建立項(xiàng)目方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-04-04
Vue3中事件總線mitt的使用方式
mitt又稱事務(wù)總線,是第三方插件,這篇文章主要為大家詳細(xì)介紹了Vue3中事件總線mitt的使用方式,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2025-03-03
vue?select組件綁定的值為數(shù)字類型遇到的問(wèn)題
這篇文章主要介紹了vue?select組件綁定的值為數(shù)字類型遇到的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-09-09
axios如何取消重復(fù)無(wú)用的請(qǐng)求詳解
這篇文章主要給大家介紹了關(guān)于axios如何取消重復(fù)無(wú)用的請(qǐng)求的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用axios具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-12-12
vue+ElementUI 關(guān)閉對(duì)話框清空驗(yàn)證,清除form表單的操作
這篇文章主要介紹了vue+ElementUI 關(guān)閉對(duì)話框清空驗(yàn)證,清除form表單的操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-08-08