位置: IT常识 - 正文

vue项目created()被调用多次的坑(vue created mounted)

编辑:rootadmin
vue项目created()被调用多次的坑 一、问题描述

推荐整理分享vue项目created()被调用多次的坑(vue created mounted),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue created this,vue create 项目,vue create 项目报错,vue created 操作dom,vue里的created,vue created 操作dom,vue里的created,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() } }}vue项目created()被调用多次的坑(vue created mounted)

其中,当上一步执行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.callBack是function类型的,那就会执行后面的this.callBack()方法,然后继续下一步;如果不是function类型的,那就不执行后面的方法,直接继续下一步。(又一个不好理解的高级写法,用if不好吗?)

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

本文链接地址:https://www.jiuchutong.com/zhishi/294498.html 转载请保留说明!

上一篇:用vue实现打印页面的几种方法(vue如何实现打印)

下一篇:OpenAI创始人:GPT-4的研究起源和构建心法(openai创始人阿尔特曼 取向)

  • 最牛的商业模式,往往能够让技术与市场需求紧密对接(最牛商业模式非常6+1)

    最牛的商业模式,往往能够让技术与市场需求紧密对接(最牛商业模式非常6+1)

  • 优酷看不了(想想办法吧爸爸为什么在优酷看不了)

    优酷看不了(想想办法吧爸爸为什么在优酷看不了)

  • 电脑丢包怎么解决(电脑网络丢包)

    电脑丢包怎么解决(电脑网络丢包)

  • 优酷vr网络异常(优酷vrapp连不上网了)

    优酷vr网络异常(优酷vrapp连不上网了)

  • 手机录屏怎么截取一部分(手机录屏怎么截屏)

    手机录屏怎么截取一部分(手机录屏怎么截屏)

  • 1660timaxq和1660ti有什么区别

    1660timaxq和1660ti有什么区别

  • 拼多多助力是什么意思(拼多多助力是什么原理)

    拼多多助力是什么意思(拼多多助力是什么原理)

  • 自己发的微信朋友圈占内存吗(自己发的微信朋友圈怎么看不到了)

    自己发的微信朋友圈占内存吗(自己发的微信朋友圈怎么看不到了)

  • h61主板配什么独立显卡(h61主板搭配)

    h61主板配什么独立显卡(h61主板搭配)

  • 访客删除了还能看到吗(删访客记录会改变访客数量吗)

    访客删除了还能看到吗(删访客记录会改变访客数量吗)

  • 引导模式怎么强制关机(引导模式怎么强制退出)

    引导模式怎么强制关机(引导模式怎么强制退出)

  • word怎样给文字加双波浪下划线(word中怎样给文字加点)

    word怎样给文字加双波浪下划线(word中怎样给文字加点)

  • 淘宝自动回复怎么设置(淘宝自动回复怎么留微信)

    淘宝自动回复怎么设置(淘宝自动回复怎么留微信)

  • 黑莓手机怎么下载软件(黑莓手机怎么下载网易云音乐)

    黑莓手机怎么下载软件(黑莓手机怎么下载网易云音乐)

  • 32根地址线内存多少(地址线32根内存多大)

    32根地址线内存多少(地址线32根内存多大)

  • 用了嗨来电怎么恢复正常(使用嗨来电怎么设置)

    用了嗨来电怎么恢复正常(使用嗨来电怎么设置)

  • 萤石云c6h复位健在哪里(萤石csc6h31wfr复位键)

    萤石云c6h复位健在哪里(萤石csc6h31wfr复位键)

  • 音乐格式怎么改(u盘下载音乐格式怎么改)

    音乐格式怎么改(u盘下载音乐格式怎么改)

  • 如何永久保存网课(如何永久保存网课视频)

    如何永久保存网课(如何永久保存网课视频)

  • 360手机怎么刷机(360手机怎么刷机忘记密码)

    360手机怎么刷机(360手机怎么刷机忘记密码)

  • gwmdmpi.exe是什么进程 有什么作用 gwmdmpi进程查询(msmpeng.exe 是什么)

    gwmdmpi.exe是什么进程 有什么作用 gwmdmpi进程查询(msmpeng.exe 是什么)

  • 关于oss使用sts 后台签发临时token前端直传大文件的错误记录(oss使用场景)

    关于oss使用sts 后台签发临时token前端直传大文件的错误记录(oss使用场景)

  • 神经网络模型之BP算法及实例分析(神经网络模型是干嘛的)

    神经网络模型之BP算法及实例分析(神经网络模型是干嘛的)

  • 多扣的增值税怎么做账务处理
  • 营业执照是怎么样子的
  • 小规模纳税人未开票收入如何填申报表
  • 企业所得税本年实际缴纳不包括上年汇算清缴补缴税款吗
  • 个人申请代开发票流程怎么操作
  • 如何审计主营业务的真实性
  • 农民工工资专户管理暂行办法
  • 发票弄丢下一步怎么办
  • 外贸企业当月没交税
  • 自然人税收管理扣缴端申报实训心得
  • 短期借款可以按币种设置明细核算
  • 增值税专票怎么抵扣
  • 公司清算后未处理财产
  • 专利技术转让使用费如何做会计处理?
  • 购买原材料的费用
  • 建筑业发票可以在备注里加备注么
  • 现金折扣怎么计算消费税
  • 简易计税核算方法有哪些
  • 其他应收款要做账吗
  • 股权转让怎么缴纳个人所得税
  • 无票收入如何抵税
  • 增值税附加税怎么计提
  • 购入的会计分录怎么写
  • 多交的公积金怎么退回来
  • 联营 保底
  • 先扣社保再发工资可以吗
  • 华为折叠手机mateX5价格
  • 电脑上不了网怎么安装网卡驱动
  • 滴滴代驾报酬
  • 如何让电脑硬件损坏
  • 销售需要安装的商品,只能在安装和检验完毕后确认收入
  • 已抵扣发票开了红字发票怎么做分录?
  • php数组函数大全
  • 出差预借差旅费属于什么科目
  • vue使用技巧
  • video.js教程
  • 残疾人保障基金减免政策
  • 累计减除费用多还是少好
  • 手把手教你如何从一无所有到财务自由
  • php curl_init
  • html5 function
  • 增值税普通发票和电子普通发票的区别
  • 工程服务预付款最新规定
  • 房地产企业所得税计算方法
  • 固定资产的入账时间应该是什么时间
  • 应交增值税转入未交增值税怎么算
  • 小微企业免税销售额和其他免税销售额的区别
  • 现金折扣方式销售货物不得从计税销售额中扣减折扣额
  • 冲销暂估入账用什么凭证
  • 普通发票开具红字发票后发票联怎么处理?
  • 生产成本人工费结转
  • 国税地税发票样式区别
  • 开票软件升级包
  • 旅行社代订的机票可以抵扣吗
  • 民办非企业可以开发票吗
  • 财务顾问费可以税前扣除吗
  • 会计总账怎么做账
  • innodb怎么实现
  • upd什么意思
  • xp系统禁止程序联网
  • ubuntu搭建go环境
  • 进程spoolsv.exe
  • windows10故障
  • 安装centos7安装位置没有磁盘
  • windows自带视频
  • win7右键设置方法
  • js修改值
  • JavaScript中的变量名不区分大小写
  • nodejs异步处理执行顺序
  • python 读取数据库
  • vue cli3 webpack配置
  • python ip地址转换
  • 东莞为什么这么多人
  • 潍坊市区面积多大
  • 税务局工作业绩
  • 合规管理的基本要求
  • 城市维护建设税税基是什么
  • 统一社会信用代码有什么用
  • 西安市人力资源和社会保障局关于2020年
  • 房地产企业所得税确认收入时间
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设