Vue.use()在new Vue() 之前使用的原因淺析
更新時間：2019年08月26日 09:41:30 作者：獼猴桃豆老大
本文通過實例代碼給大家介紹了為什么Vue.use()在new Vue() 之前使用,需要的朋友可以參考下
使用Vue前端框架開發(fā)有些時間了，官方文檔對于插件開發(fā)也有詳細(xì)的介紹。最近強迫癥犯了，老在想為什么Vue.use函數(shù)執(zhí)行，要在Vue實例化即new Vue(options)之前。解鈴還須系鈴人，這個問題只能通過看源碼解決，于是。。。
先看Vue.use做了什么
Vue.use = function (plugin: Function | Object) {
//Vue構(gòu)造函數(shù)上定義_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作為第一個參數(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)注冊，相同的插件只注冊一次
- 將Vue構(gòu)造函數(shù)作為第一個參數(shù)，作為插件注冊調(diào)用
- 根據(jù)插件形式選擇調(diào)用
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)時首先會執(zhí)行this._init進行初始化，將Vue上的屬性和options進行合并，然后在進行事件、生命周期等的初始化。beforeCreate,created生命周期的hook函數(shù)也是在這里進行調(diào)用
如果Vue.use在new Vue()之后執(zhí)行，this._init()時你使用的插件的內(nèi)容還沒有添加到Vue.options.components、Vue.options.directives、Vue.options.filters等屬性中。所以新初始化的Vue實例中也就沒有插件內(nèi)容
總結(jié)
以上所述是小編給大家介紹的Vue.use()在new Vue() 之前使用的原因淺析,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！
相關(guān)文章
這篇文章主要介紹了Nuxt.js實戰(zhàn)和配置，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
在實際項目開發(fā)過程中，如果公共數(shù)據(jù)比較多我們會使用vuex做公共狀態(tài)管理，但是在對瀏覽器進行刷新操作的時候，會導(dǎo)致vuex內(nèi)的數(shù)據(jù)丟失，這種情況有些時候是沒問題的，但是有的時候我們需要某些數(shù)據(jù)可以持久化的保存，這樣就需要做對應(yīng)的處理2023-01-01
大部分中文應(yīng)用彈出的默認(rèn)鍵盤是簡體中文輸入法鍵盤,在輸入用戶名和密碼的時候,如果使用簡體中文輸入法鍵盤,用戶的輸入記錄會被緩存下來所以我們需要一個安全鍵盤,本文給大家介紹了如何基于vue封裝一個安全鍵盤組件,需要的朋友可以參考下2023-12-12
這篇文章主要介紹了Vue中的Computed實現(xiàn)原理,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
vue 列表頁跳轉(zhuǎn)詳情頁獲取id以及詳情頁通過id獲取數(shù)據(jù)
這篇文章主要介紹了vue 列表頁跳轉(zhuǎn)詳情頁獲取id以及詳情頁通過id獲取數(shù)據(jù)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
這篇文章主要介紹了vue-cli腳手架創(chuàng)建項目遇到的坑及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要為大家詳細(xì)介紹了Vue+canvas實現(xiàn)視頻截圖功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
vue動態(tài)刪除從數(shù)據(jù)庫倒入列表的某一條方法
今天小編就為大家分享一篇vue動態(tài)刪除從數(shù)據(jù)庫倒入列表的某一條方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了Vue-cli和移動端布局和動畫使用詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要介紹了Vue傳值-三種常用傳值示例，主要介紹了父組件向子組件進行傳值，子組件向父組件傳值和非父子組件進行傳值，感興趣的小伙伴們可以參考一下2021-11-11