重慶分公司,新征程啟航
為企業提供網站建設、域名注冊、服務器等服務
為企業提供網站建設、域名注冊、服務器等服務
這篇文章將為大家詳細講解有關Vue.use()在new Vue()之前使用的原因是什么,小編覺得挺實用的,因此分享給大家做個參考,希望大家閱讀完這篇文章后可以有所收獲。
成都創新互聯專注于企業成都全網營銷、網站重做改版、西青網站定制設計、自適應品牌網站建設、H5技術、商城系統網站開發、集團公司官網建設、成都外貿網站制作、高端網站制作、響應式網頁設計等建站業務,價格優惠性價比高,為西青等各大城市提供網站開發制作服務。
使用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中合并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)
時首先會執行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()之前使用的原因是什么”這篇文章就分享到這里了,希望以上內容可以對大家有一定的幫助,使各位可以學到更多知識,如果覺得文章不錯,請把它分享出去讓更多的人看到。