位置: 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创始人阿尔特曼 取向)

  • 人力资源公司怎么和企业谈合作
  • 土地增值税的计算方法公式
  • 所得税退税的会计处理方法
  • 如何判断会计政策变动
  • 提供教育服务免征增值税文件
  • 营改增后,建筑安装工程的费率是
  • 公司开办费有哪些
  • 公司支付员工工伤赔偿怎么做账
  • 公司之间借钱不还违法吗
  • 实施计划成本存货发生毁损的会计处理怎么做?
  • 企业进行股票买入的条件
  • 餐饮会员充值赠送内帐怎么做账务处理
  • 支付的水电费属于什么会计科目
  • 开发票零税率和免税是一样的意思吗
  • 机械设备增值税税率
  • 停车场需要对车辆负责吗
  • 销售商品货款已预收
  • 建设单位对工程施工的评价意见
  • 工资计入劳务成本
  • mac锁屏屏保
  • 暂估成本比实际高分录
  • 社保缴费要和工龄一致吗
  • 小规模企业亏损情况说明范文
  • 借条字迹不清楚有效吗
  • 一个完整的php文件有哪些元素组成
  • 最小全画幅的数值是多少
  • 什么食物含胆固醇高不能吃
  • 斯塔尔德
  • thinkphp批量修改
  • 潘塔纳尔湿地的主要成因
  • 皮丘拉湖畔的乌代布尔城市宫殿,印度 (© Chaiyun Damkaew/Getty Images)
  • php数组的概念是什么
  • php数学
  • 机器人折旧年限
  • 电汇收款的会计分录
  • 小微企业减免额怎么计算
  • php 文件处理
  • 电子发票报销需要签字吗
  • 咨询公司需要交税吗
  • 什么是ad域服务
  • 在建工程领用自产应税消费品
  • 买理财产品的风险
  • 接受母公司捐赠现金分录
  • 上期有留抵进项税额,本期如何申报
  • 坏账准备贷方表示什么
  • 购买税控盘的账务处理
  • 实收资本(或股本)是什么意思
  • 道路交通事故中施救费应如何处理?
  • 开发间接费用怎么计算
  • 应收利息和利息收入的差额
  • 开户一定要去银行吗
  • 会计计量属性是什么意思
  • windows 开始
  • 萝卜家园系统安装教程
  • linux系统故障及解决方法
  • ubuntu屏幕突然变大
  • centos7 cp
  • 如何查看苹果mac系统
  • centos7添加ip地址
  • centos搭建v2
  • 进程 电脑
  • linux小技巧
  • cocos2dx-js
  • javascript中的关键字有哪些
  • jquery选择指定标签
  • unity2d ui
  • [置顶]游戏名:chivalry2
  • javascript基础笔记
  • Python爬取网易云音乐歌单内歌曲歌手封面播放地址
  • JavaScript File API文件上传预览
  • node运行js文件
  • jquery获取某个属性的值
  • jquery.ztree中文api
  • jQuery Easyui Datagrid实现单行的上移下移及保存移动的结果
  • js 自执行
  • 婚前买房婚后个人还贷卖房怎么签字
  • 美国进口税起征点
  • 浙江省发票勾选认证操作流程2021
  • 四川省地方税务局公告2018年第3号
  • 北京地税app
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设