Question

有这样的代码：

<template>

   <div class="wrapper">
   </div>

</template>

<script>

import axios from 'axios';

export default{

  created () {
    console.log('222');
    this.getTrackerIdData();
    this.getTrackerData();
  },

  methods: {

    getTrackerIdData () {
        return axios.get("https://seo-gmbh.eu/couriertracker/json/couriertracker_api.php?action=tracking_new.create" , {
         })
        .then(response => {
          this.$store.commit('tracker/setTrackingKeyId', response.data.data.tracking_new_key_id);
          this.$store.commit('tracker/setQrCodeUrl', response.data.data.filename_qr_code_tracking_new);
        })
        .catch(function (error) {
          console.log(error);
        });
    },

    getTrackerData () {

        setInterval(()=>myTimer(this), 60000);

        function myTimer(th) {
             return axios.get("https://seo-gmbh.eu/couriertracker/json/couriertracker_api.php?action=get_tracking_data&key_id=" + th.$store.state.tracker.trackingKeyId , {
             })
            .then(response => {
              th.$store.commit('tracker/setTrackingServerData', response.data.data.tracking_data);
            })
            .catch(function (error) {
              console.log(error);
            });
        }

},

  }
}
</script>

在项目中启动此类解决方案时，服务器端开发人员通知我，至少其方面的请求方法getTrackerIdData ()可以工作两次！
将代码（console.log ('222');）放在created生命周期的钩子中（方法调用的地方），我发现它在萤火虫中显示了两次：

问题：
为什么会发生这种情况，从实现从服务器接收数据的角度来看，在这种情况下哪种方法是正确的？

P.S。如果所有内容都在mounted挂钩中调用，则该代码（包括服务器端）仅工作1次。

Answer 1

重要的是要知道，在任何Vue实例生命周期中，都只能从客户端和服务器端调用beforeCreate和created挂钩。所有其他挂钩都只能从客户端调用。

所以这就是为什么创建两次钩子并执行 console.log（'222'）; 两次

的原因

作为参考，您可以从here

阅读

为什么此生命周期挂钩代码两次起作用？

1 个答案: