一、問題描述

最近碰到一個奇怪的生產(chǎn)問題：

正常情況下、前端頁面會請求一次后臺、然后后臺返回信息（"處理成功"或"處理失敗"）、前端展示；
后臺用aop+redis寫了一個防止重復(fù)調(diào)用的方法，如果5s內(nèi)同一個用戶重復(fù)調(diào)用同一個接口，就返回"請勿重復(fù)調(diào)用"，前端就會展示這個。

但是，某幾個頁面，前端總是會重復(fù)調(diào)用后端2次，導致用戶只能看到"請勿重復(fù)調(diào)用"，無法確認本次操作是成功還是失敗，嚴重影響了用戶的正常使用。（雖然是處理成功，但是顯示不出來…）

一開始還懷疑是不是后端的問題，排查了半天，終于鎖定了，是前端的問題，vue項目中的created()方法被調(diào)用了2次。

繼續(xù)排查，發(fā)現(xiàn)從正常頁面跳轉(zhuǎn)到這個問題頁面時，確實只跳轉(zhuǎn)了1次，按理說created()方法應(yīng)該也只觸發(fā)1次的，但是就是不知道為什么觸發(fā)了2次。

二、排查過程

1.從頭開始排查前端項目，vue項目首先會加載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()
    }
  }
}

其中，當上一步執(zhí)行new Vcon()時，實際執(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方法（這個前端項目是vue項目，可以打包后把靜態(tài)頁面部署在服務(wù)器上；sdk方法是app和ios里的方法，前端只能這樣才能調(diào)用到、待sdk方法處理完后會觸發(fā)callback方法）；

sdk方法中，會執(zhí)行betterHandler()方法，意思是，如果當前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
    }

因為prodInit()方法的邏輯中，正常情況下，已經(jīng)調(diào)用過一次typeof this.callBack === 'function' && this.callBack()了，然而執(zhí)行完prodInit()方法后，又會調(diào)用一次typeof this.callBack === 'function' && this.callBack()，所以才導致created()方法被重復(fù)調(diào)用了2次。

4.正確代碼如下：

    // 如果是生產(chǎn)環(huán)境
    if (this.env !== 'test') {
      this.prodInit()
      //這里導致了重復(fù)created()
      //typeof this.callBack === 'function' && this.callBack()
      return
    }

修改后，發(fā)布生產(chǎn)，終于恢復(fù)了正常。

三、備注

1.vue項目中，有時會自動優(yōu)化代碼格式，導致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次；但是如果代碼有問題，就會導致created()方法會在頁面初始化的時候執(zhí)行2次或多次（如本文），這個坑需要注意。

總結(jié)

到此這篇關(guān)于vue項目中created()被調(diào)用多次的踩坑的文章就介紹到這了,更多相關(guān)vue created()被調(diào)用多次內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！