您好,登錄后才能下訂單哦!
本文小編為大家詳細(xì)介紹“vue項(xiàng)目中created()被調(diào)用多次的問題怎么解決”,內(nèi)容詳細(xì),步驟清晰,細(xì)節(jié)處理妥當(dāng),希望這篇“vue項(xiàng)目中created()被調(diào)用多次的問題怎么解決”文章能幫助大家解決疑惑,下面跟著小編的思路慢慢深入,一起來學(xué)習(xí)新知識吧。
最近碰到一個奇怪的生產(chǎn)問題:
正常情況下、前端頁面會請求一次后臺、然后后臺返回信息("處理成功"或"處理失敗")、前端展示;
后臺用aop+redis寫了一個防止重復(fù)調(diào)用的方法,如果5s內(nèi)同一個用戶重復(fù)調(diào)用同一個接口,就返回"請勿重復(fù)調(diào)用",前端就會展示這個。
但是,某幾個頁面,前端總是會重復(fù)調(diào)用后端2次,導(dǎo)致用戶只能看到"請勿重復(fù)調(diào)用",無法確認(rèn)本次操作是成功還是失敗,嚴(yán)重影響了用戶的正常使用。(雖然是處理成功,但是顯示不出來…)
一開始還懷疑是不是后端的問題,排查了半天,終于鎖定了,是前端的問題,vue項(xiàng)目中的created()方法被調(diào)用了2次。
繼續(xù)排查,發(fā)現(xiàn)從正常頁面跳轉(zhuǎn)到這個問題頁面時,確實(shí)只跳轉(zhuǎn)了1次,按理說created()方法應(yīng)該也只觸發(fā)1次的,但是就是不知道為什么觸發(fā)了2次。
1.從頭開始排查前端項(xiàng)目,vue項(xiàng)目首先會加載main.js,發(fā)現(xiàn)這個文件里有:
import Vcon from './assets/js/vcon' new Vcon({ env: ENV }, () => { new Vue({ router, render: h => h(App) }).$mount('#app') })
發(fā)現(xiàn)這個文件里,并不是普通的使用new Vue()
創(chuàng)建的頁面,而是外面有封裝了一個new Vcon()
方法,并傳了2個參數(shù),其中第一個參數(shù)是{ env: ENV }
,第二個參數(shù)是 () => { new Vue({ router, render: h => h(App) }).$mount('#app') }
2.繼續(xù),查看./assets/js/vcon.js
文件,發(fā)現(xiàn)這個文件里有類似這樣的:
class Vcon { constructor (opt, callBack) { this.env = opt.env || '' // 記錄代碼環(huán)境 this.callBack = callBack // 記錄回調(diào)函數(shù) // 如果是生產(chǎn)環(huán)境 if (this.env !== 'test') { this.prodInit() typeof this.callBack === 'function' && this.callBack() return } // 如果是測試環(huán)境 if (this.env === 'test') { this.testInit() return } } testInit () { import('vconsole').then(({ default: VConsole }) => { new VConsole() console.log('測試vconsole加載完成') typeof this.callBack === 'function' && this.callBack() }) } prodInit () { let _that = this window.ISALES.callApp('getUserInfoByNative', { callback: function (userInfo) { if (userInfo.code === '0') { _that.betterStaffNUmber = userInfo.msg.staffNumber _that.betterHandler(userInfo) return } alert('獲取sdk出錯,請稍后再試') } }) } betterHandler (userInfo) { if (userInfo.msg.userCode == 'admin') { import('vconsole').then(({ default: VConsole }) => { new VConsole() console.log(`admin的vconsole加載完成`) typeof this.callBack === 'function' && this.callBack() }) return }else{ this.callBack() } } }
其中,當(dāng)上一步執(zhí)行new Vcon()
時,實(shí)際執(zhí)行的就是這里的constructor ()
方法;
如果是測試環(huán)境,那就執(zhí)行testInit ()
方法,這個還是比較明顯的,用來展示vconsole(測試環(huán)境一直正常,沒有復(fù)測出來問題);
如果是生產(chǎn)環(huán)境,那就執(zhí)行prodInit()
方法,然后執(zhí)行typeof this.callBack === 'function' && this.callBack()
方法(這里感覺有些問題,先繼續(xù)看);
prodInit()
方法里,會執(zhí)行window.ISALES.callApp
方法,這個是個sdk方法(這個前端項(xiàng)目是vue項(xiàng)目,可以打包后把靜態(tài)頁面部署在服務(wù)器上;sdk方法是app和ios里的方法,前端只能這樣才能調(diào)用到、待sdk方法處理完后會觸發(fā)callback方法);
sdk方法中,會執(zhí)行betterHandler()
方法,意思是,如果當(dāng)前app/ios的登錄人是admin,那就顯示vconsole,否則就不顯示。
3.根據(jù)生產(chǎn)created()方法被調(diào)用2次、而測試正常的現(xiàn)象,排查到問題方法位置:
// 如果是生產(chǎn)環(huán)境 if (this.env !== 'test') { this.prodInit() typeof this.callBack === 'function' && this.callBack() return }
因?yàn)閜rodInit()方法的邏輯中,正常情況下,已經(jīng)調(diào)用過一次typeof this.callBack === 'function' && this.callBack()
了,然而執(zhí)行完prodInit()方法后,又會調(diào)用一次typeof this.callBack === 'function' && this.callBack()
,所以才導(dǎo)致created()方法被重復(fù)調(diào)用了2次。
4.正確代碼如下:
// 如果是生產(chǎn)環(huán)境 if (this.env !== 'test') { this.prodInit() //這里導(dǎo)致了重復(fù)created() //typeof this.callBack === 'function' && this.callBack() return }
修改后,發(fā)布生產(chǎn),終于恢復(fù)了正常。
1.vue項(xiàng)目中,有時會自動優(yōu)化代碼格式,導(dǎo)致if后面沒有大括號、只有1句,滿足條件就執(zhí)行、不滿足就不執(zhí)行,需要注意。
2.有時,if沒有else,而是if中結(jié)尾有個return,此時也類似else,但是容易忽略,需要注意。(這個也是自動優(yōu)化格式的?還是故意寫的難懂了?)
3.typeof this.callBack === 'function' && this.callBack()
,這個的意思是,如果this.callBack
是function
類型的,那就會執(zhí)行后面的this.callBack()
方法,然后繼續(xù)下一步;如果不是function
類型的,那就不執(zhí)行后面的方法,直接繼續(xù)下一步。(又一個不好理解的高級寫法,用if不好嗎?)
4.正常情況下,vue頁面的created()方法會在頁面初始化的時候執(zhí)行1次;但是如果代碼有問題,就會導(dǎo)致created()方法會在頁面初始化的時候執(zhí)行2次或多次(如本文),這個坑需要注意。
讀到這里,這篇“vue項(xiàng)目中created()被調(diào)用多次的問題怎么解決”文章已經(jīng)介紹完畢,想要掌握這篇文章的知識點(diǎn)還需要大家自己動手實(shí)踐使用過才能領(lǐng)會,如果想了解更多相關(guān)內(nèi)容的文章,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。