使用Vue前端框架開發有些時間了，官方文檔對于插件開發也有詳細的介紹。最近強迫癥犯了，老在想為什么Vue.use函數執行，要在Vue實例化即new Vue(options)之前。解鈴還須系鈴人，這個問題只能通過看源碼解決，于是。。。

先看Vue.use做了什么

Vue.use = function (plugin: Function | Object) {  //Vue構造函數上定義_installedPlugins 避免相同的插件注冊多次  const installedPlugins = (this._installedPlugins || (this._installedPlugins = []))  // import是單例模式  //所以plugin不論是Fuction還是Object同一個插件都是同一個  if (installedPlugins.indexOf(plugin) > -1) {   return this  }  // additional parameters  const args = toArray(arguments, 1)  // Vue作為第一個參數傳遞給插件  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,可以鏈式調用 }

do:

檢查插件是否已經注冊，相同的插件只注冊一次 將Vue構造函數作為第一個參數，作為插件注冊調用 根據插件形式選擇調用plugin.install還是plugin 存儲已注冊插件，用于插件是否已注冊檢驗

Vue.prototype._init中合并optionsVue.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)時首先會執行this._init進行初始化，將Vue上的屬性和options進行合并，然后在進行事件、生命周期等的初始化。beforeCreate,created生命周期的hook函數也是在這里進行調用

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

總結

以上所述是小編給大家介紹的Vue.use()在new Vue() 之前使用的原因淺析,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對錯新站長站網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！