为什么这个生命周期钩子代码会工作两次？

Question

有这样一段代码：
\n

\n\n

<template>\n\n   <div class="wrapper">\n   </div>\n\n</template>\n\n<script>\n\nimport axios from \'axios\';\n\nexport default{\n\n  created () {\n    console.log(\'222\');\n    this.getTrackerIdData();\n    this.getTrackerData();\n  },\n\n  methods: {\n\n    getTrackerIdData () {\n        return axios.get("https://seo-gmbh.eu/couriertracker/json/couriertracker_api.php?action=tracking_new.create" , {\n         })\n        .then(response => {\n          this.$store.commit(\'tracker/setTrackingKeyId\', response.data.data.tracking_new_key_id);\n          this.$store.commit(\'tracker/setQrCodeUrl\', response.data.data.filename_qr_code_tracking_new);\n        })\n        .catch(function (error) {\n          console.log(error);\n        });\n    },\n\n    getTrackerData () {\n\n        setInterval(()=>myTimer(this), 60000);\n\n        function myTimer(th) {\n             return axios.get("https://seo-gmbh.eu/couriertracker/json/couriertracker_api.php?action=get_tracking_data&key_id=" + th.$store.state.tracker.trackingKeyId , {\n             })\n            .then(response => {\n              th.$store.commit(\'tracker/setTrackingServerData\', response.data.data.tracking_data);\n            })\n            .catch(function (error) {\n              console.log(error);\n            });\n        }\n\n},\n\n  }\n}\n</script>\n

\n\n

\n当在项目中启动这样的解决方案时，服务器端开发人员告诉我，至少getTrackerIdData ()其一侧的请求方法可以工作两次！
\n将代码 ( console.log (\'222\');) 放在生命周期的钩子中created（方法调用的地方），我发现它在 firebug 中显示了两次：

\n\n

\n\n

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

\n\n

PS 如果所有内容都在钩子中调用mounted，则代码可以运行，包括在服务器端，仅运行 1 次。

\n

Answer 1

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

这就是为什么创建的钩子调用了两次并执行 console.log ('222'); 两次

作为参考，您可以从这里阅读