vue项目中created()被调用多次的踩坑实战

 更新时间:2023年03月29日 09:08:02   作者:追逐梦想永不停  
在vue项目中我在created中调用了两次get数据请求,所以下面这篇文章主要给大家介绍了关于vue项目中created()被调用多次的踩坑实战,需要的朋友可以参考下

一、问题描述

最近碰到一个奇怪的生产问题:

正常情况下、前端页面会请求一次后台、然后后台返回信息("处理成功"或"处理失败")、前端展示;
后台用aop+redis写了一个防止重复调用的方法,如果5s内同一个用户重复调用同一个接口,就返回"请勿重复调用",前端就会展示这个。

但是,某几个页面,前端总是会重复调用后端2次,导致用户只能看到"请勿重复调用",无法确认本次操作是成功还是失败,严重影响了用户的正常使用。(虽然是处理成功,但是显示不出来…)

一开始还怀疑是不是后端的问题,排查了半天,终于锁定了,是前端的问题,vue项目中的created()方法被调用了2次。

继续排查,发现从正常页面跳转到这个问题页面时,确实只跳转了1次,按理说created()方法应该也只触发1次的,但是就是不知道为什么触发了2次。

二、排查过程

1.从头开始排查前端项目,vue项目首先会加载main.js,发现这个文件里有:

import Vcon from './assets/js/vcon'

new Vcon({
  env: ENV
}, () => {
  new Vue({
    router,
    render: h => h(App)
  }).$mount('#app')
})

发现这个文件里,并不是普通的使用new Vue()创建的页面,而是外面有封装了一个new Vcon()方法,并传了2个参数,其中第一个参数是{ env: ENV },第二个参数是 () => { new Vue({ router, render: h => h(App) }).$mount('#app') }

2.继续,查看./assets/js/vcon.js文件,发现这个文件里有类似这样的:

class Vcon {
  constructor (opt, callBack) {
    this.env = opt.env || '' // 记录代码环境
    this.callBack = callBack // 记录回调函数
    // 如果是生产环境
    if (this.env !== 'test') {
      this.prodInit()
      typeof this.callBack === 'function' && this.callBack()
      return
    }

    // 如果是测试环境
    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()
    }
  }
}

其中,当上一步执行new Vcon()时,实际执行的就是这里的constructor ()方法;

如果是测试环境,那就执行testInit ()方法,这个还是比较明显的,用来展示vconsole(测试环境一直正常,没有复测出来问题);
如果是生产环境,那就执行prodInit()方法,然后执行typeof this.callBack === 'function' && this.callBack()方法(这里感觉有些问题,先继续看);

prodInit()方法里,会执行window.ISALES.callApp方法,这个是个sdk方法(这个前端项目是vue项目,可以打包后把静态页面部署在服务器上;sdk方法是app和ios里的方法,前端只能这样才能调用到、待sdk方法处理完后会触发callback方法);

sdk方法中,会执行betterHandler()方法,意思是,如果当前app/ios的登录人是admin,那就显示vconsole,否则就不显示。

3.根据生产created()方法被调用2次、而测试正常的现象,排查到问题方法位置:

    // 如果是生产环境
    if (this.env !== 'test') {
      this.prodInit()
      typeof this.callBack === 'function' && this.callBack()
      return
    }

因为prodInit()方法的逻辑中,正常情况下,已经调用过一次typeof this.callBack === 'function' && this.callBack()了,然而执行完prodInit()方法后,又会调用一次typeof this.callBack === 'function' && this.callBack(),所以才导致created()方法被重复调用了2次。

4.正确代码如下:

    // 如果是生产环境
    if (this.env !== 'test') {
      this.prodInit()
      //这里导致了重复created()
      //typeof this.callBack === 'function' && this.callBack()
      return
    }

修改后,发布生产,终于恢复了正常。

三、备注

1.vue项目中,有时会自动优化代码格式,导致if后面没有大括号、只有1句,满足条件就执行、不满足就不执行,需要注意。

2.有时,if没有else,而是if中结尾有个return,此时也类似else,但是容易忽略,需要注意。(这个也是自动优化格式的?还是故意写的难懂了?)

3.typeof this.callBack === 'function' && this.callBack(),这个的意思是,如果this.callBackfunction类型的,那就会执行后面的this.callBack()方法,然后继续下一步;如果不是function类型的,那就不执行后面的方法,直接继续下一步。(又一个不好理解的高级写法,用if不好吗?)

4.正常情况下,vue页面的created()方法会在页面初始化的时候执行1次;但是如果代码有问题,就会导致created()方法会在页面初始化的时候执行2次或多次(如本文),这个坑需要注意。

总结

到此这篇关于vue项目中created()被调用多次的踩坑的文章就介绍到这了,更多相关vue created()被调用多次内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue 动态样式绑定 class/style的写法小结

    vue 动态样式绑定 class/style的写法小结

    这篇文章主要介绍了vue 动态样式绑定 class/style的写法小结,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-03-03
  • vue开发页面自适应屏幕尺寸的实例代码

    vue开发页面自适应屏幕尺寸的实例代码

    使用vue开发的页面都是通过px设置它的尺寸,如果换了一个不同尺寸的屏幕就会出现页面排版错乱,显示不完整等情况,下面通过插件将px装换为rem单位适应不同尺寸的屏幕,需要的朋友可以参考下
    2022-12-12
  • 如何使用Vue做个简单的比较两个数字大小页面

    如何使用Vue做个简单的比较两个数字大小页面

    这篇文章主要给大家介绍了关于如何使用Vue做个简单的比较两个数字大小页面的相关资料,实现一个比较两个数字大小的页面,练习Vue实例的创建、数据绑定和事件监听方法,需要的朋友可以参考下
    2023-10-10
  • 使用Element时默认勾选表格toggleRowSelection方式

    使用Element时默认勾选表格toggleRowSelection方式

    这篇文章主要介绍了使用Element时默认勾选表格toggleRowSelection方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • vue实现echarts饼图/柱状图点击事件实例

    vue实现echarts饼图/柱状图点击事件实例

    echarts原生提供了相应的API,只需要在配置好echarts之后绑定相应的事件即可,下面这篇文章主要给大家介绍了关于vue实现echarts饼图/柱状图点击事件的相关资料,需要的朋友可以参考下
    2023-06-06
  • Vue和原生JS中如何使用自定义字体

    Vue和原生JS中如何使用自定义字体

    这篇文章主要为大家详细介绍了Vue和原生JS中如何使用自定义字体,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的小伙伴可以了解下
    2024-01-01
  • 解决vue多个路由共用一个页面的问题

    解决vue多个路由共用一个页面的问题

    下面小编就为大家分享一篇解决vue多个路由共用一个页面的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • vue中实现左右联动的效果

    vue中实现左右联动的效果

    这篇文章主要介绍了vue中实现左右联动的效果,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧
    2018-06-06
  • vue实现简单的购物车小案例

    vue实现简单的购物车小案例

    这篇文章主要为大家详细介绍了vue实现简单的购物车小案例,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • 详解.vue文件中style标签的几个标识符

    详解.vue文件中style标签的几个标识符

    这篇文章主要介绍了详解.vue文件中style标签的几个标识符,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07

最新评论