有这样一段代码:
<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生命周期(方法调用的地方)的钩子(Hook)中，我发现它显示了两次在 Firebug 中:
问题:
为什么会发生这种情况？从服务器接收数据的实现 Angular 来看，在这种情况下什么方法是正确的？
附注如果所有内容都在 mounted Hook 中调用，则代码可以运行(包括在服务器端)仅 1 次。
最佳答案
重要的是要知道，在任何 Vue 实例生命周期中，只有 beforeCreate 和 Created Hook 会从客户端和服务器端调用。所有其他 Hook 仅从客户端调用。
这就是为什么创建的钩子(Hook)调用了两次并执行console.log ('222');两次
作为引用，您可以阅读 here
关于javascript - 为什么这个生命周期钩子(Hook)代码会工作两次？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60199338/