Vue项目中浏览器终端警告[Violation] ‘click‘ handler took 1137ms

出现这种问题怎么办呢

1.首先理解报错的意思

2.找到出错的位置

3根据警告提示来找错

解决

这个警告说的是单击处理程序耗时太长了

然后去找报错的位置,一般在后面都会跟着位置在哪一行,但是我很幸运的没有,这就很难受,只能自己找,既然是单击事件,那肯定是在我做了单击之后报的错,看了一下代码如下

 <el-button size="small" type="primary" @click="submitForm">确定</el-button>


submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          alert('submit!')    // 就是这行代码的影响才会警告
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },

但是我这段代码啥也没做,只有一个alert弹窗,试着把他隐藏了,发现问题解决了…

至于原因呢,

我觉得应该是,单击事件本来就是点击一下就完成的事件,但是添加了一个alert弹窗之后,就延长了单击事件的时间,只有这个alert弹窗关闭之后单击事件才会结束,因为是单线程操作,这样就会严重影响后续代码的运行,所以才会警告