javascript - 为什么这个生命周期钩子代码会工作两次?
问题描述
有这样一段代码:
<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
(
问题:
为什么会发生这种情况,从实现从服务器接收数据的角度来看,在这种情况下哪种方法是正确的?
PS 如果一切都在mounted
钩子中调用,那么代码可以工作,包括在服务器端,只有 1 次。
解决方案
重要的是要知道,在任何 Vue 实例生命周期中,只有 beforeCreate 和 created 钩子在客户端和服务器端都被调用。所有其他挂钩仅从客户端调用。
所以这就是为什么创建钩子调用 2 次并执行console.log ('222'); 两次
供参考,您可以从这里阅读
推荐阅读
- c++ - 使用模板时可能是编译器中的 SFINAE BUG?
- asp.net-core - 在 IdentityServer4 和 ASP.NET Core 中检索客户端名称
- php - 如何将此响应xml转换为json
- python - 创建新类实例的替代方法
- awk - 如果它们在文件中,如何替换字符串
- python - 更新后pip3“TypeError:'module'对象不可调用”
- python - 如何在熊猫中按特定行名称/值删除一行
- algorithm - 如何生成将球分配到垃圾箱的所有组合,包括空分配和满分配?
- performance - 为什么选择不同的分区列很慢?
- mysql - “如何在mysql中查询这个?我无处可去。”