为什么这个生命周期钩子代码工作两次? [英] Why is this lifecycle hook code working twice?
问题描述
有这么一段代码:
<div class="wrapper"></模板><脚本>从 'axios' 导入 axios；导出默认{创建(){console.log('222');this.getTrackerIdData();this.getTrackerData();},方法: {getTrackerIdData(){return axios.get("https://seo-gmbh.eu/couriertracker/json/couriertracker_api.php?action=tracking_new.create", {}).then(响应 => {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(函数(错误){控制台日志(错误)；});},getTrackerData(){setInterval(()=>myTimer(this), 60000);函数 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(响应 => {th.$store.commit('tracker/setTrackingServerData', response.data.data.tracking_data);}).catch(函数(错误){控制台日志(错误)；});}},}}
在项目中启动这样的解决方案时，服务器端开发人员告诉我，至少它端的请求方法getTrackerIdData()工作两次！
将代码 (console.log ('222');) 放在 created 生命周期的钩子中(方法调用的地方)，我发现它显示了两次在萤火虫中:
问题:
为什么会发生这种情况，从实现从服务器接收数据的角度来看，这种情况下哪种方法是正确的?
附言如果所有内容都在 mounted 钩子中调用，那么代码可以工作，包括在服务器端，只有 1 次.
重要的是要知道，在任何 Vue 实例生命周期中，只有 beforeCreate 和 created 钩子在客户端和服务器端都被调用.所有其他钩子仅从客户端调用.
这就是为什么创建的钩子调用了 2 次并执行了 console.log ('222'); 两次
作为参考，您可以从此处
阅读There is such a code:
<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>
When starting such a solution in the project, the server-side developer informed me that at least the request method getTrackerIdData () on its side works twice!
Having placed the code (console.log ('222');) in the hook of the created lifecycle (where the method calls), I found that it is displayed twice in the firebug:
Question:
Why is this happening and what approach is right in this case from the point of view of the implementation of receiving data from the server?
P.S. If everything is called in the mounted hook, then the code works, including on the server side, only 1 time.
It is important to know that in any Vue instance lifecycle, only beforeCreate and created hooks are called both from client-side and server-side. All other hooks are called only from the client-side.
so thats why created hook called 2 times and executing the console.log ('222'); twice
for reference you can read from here
这篇关于为什么这个生命周期钩子代码工作两次?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
