项目开发踩坑记：ElementUI的Radio组件change事件触发两次？

   刚开始是一直在网上百度，说Radio标签解析后包含input和label标签，所以点击时一次是在input标签上，一次是在label标签上，所以是触发了两次，看了下控制台解析情况确实是这样，但是按照网上的解决方法试过之后都不行；

     具体解决方法有:

      1. 在点击事件上添加标签名的判断，确保只执行一次：if(e.target.tagName==='INPUT')  return

 <el-radio v-model="test" :label="0" @click="test($event, 0)">水果</el-radio>
 <el-radio v-model="test" :label="1" @click="test($event, 1)">芒果</el-radio>

  test(e, val) {
    if(e.target.tagName==='INPUT')  return
  }

        2.  阻止默认事件的触发；即 在点击事件上添加 .prevent修饰符；

        3.  阻止事件冒泡的触发；即 在点击事件上添加 .stop修饰符；

以上方法都试过后发现问题还未解决；

最后通过控制台发现是接口调用两次，但是第二次接口返回慢（超过5秒）导致的问题，

解决步骤：

1. 先将接口改成一次调用，发现基本没问题；

2. 在postMan中连续多次调用发现第二次接口响应确实慢；

最后结论：首先是由于页面在created和activated生命周期中触发了两次接口的问题；另外是由于接口连续多次调用时第二次响应慢的问题；

解决方案：

1. 去掉页面activated中的接口调用，使页面接口只调用一次（注： 此时的业务场景为商品编辑页，所以在切换tab时无需二次调用接口更新页面数据，也符合业务需求，所以才能去掉第二次接口的调用）

2. 后端进行sql查询优化

所以如果有相同坑的时候，建议排查步骤

1. 分析是否是生命周期导致接口多次调用的问题；

2. 分析是否是接口响应慢导致的问题；