vue项目中使用axios获取后台数据是在那个生命周期中?created还是mounted?他们的区别在那?
###mounted或者created都可以。created时dom还没有加载,适合调用一些对dom起作用的方法从后台获取数据。毕竟vue数据即视图嘛。可以把created周期视作js中的load()
其中created()
钩子函数进行的DOM操作一定要放在Vue.nextTick()
的回调函数中
created() {
this.$nextTick(() => {
//dom操作
})
}
mounted时dom已经加载完毕,适合调用一些对dom起补充作用的方法从后台获取数据。可以把mounted视作jquery中的ready()。
一般来说mounted用的最多,因为大多数都是基于dom树,对视图的的更新和修改。
###区别只有能不能操作 DOM 和子组件是否已加载。
但注意一点的是,如果你取数据是个异步方法,那么异步结束后跟组件是否已挂载`在时序上无法保证有必然的先后顺序。
举个例子:
created() {
fetchAsync()
.then(() => {
// 此时 mounted 是否已经触发过,是无法保证的
// 如果你需要 this.$refs 之类的操作
// 那么稳妥起见需要 this.$nextTick 包裹
});
}
mounted() {
fetchAsync()
.then(() => {
// this.$refs 之类的操作不需要 this.$nextTick 包裹
});
}
如果你不需要考虑上述这点的华,那么其实放哪儿都可以。
###mounted相较created,此时元素已经挂载在了页面上。
两者都可以请求数据
然而我一般请求数据写在beforeRouteEnter中(项目中使用了vue-router)
其实区别不大。created
在组件刚创建好,mounted
时已经添加到 DOM 上。理论上后者的时候可能会重复更新 DOM,有那么一点性能损耗,但考虑到网络请求的异步特性,最终落实到产品当中的微乎其微。
如果在mounted中请求数据就会出现页面显示了元素但是里面是空的,页面大部分空白的情况(因为没有拿到数据),在created里面写的话呈现出来的效果视觉上比较友好一些