问答

VUE应在那个生命周期获取后台数据?

作者:admin 2021-05-07 我要评论

vue项目中使用axios获取后台数据是在那个生命周期中?created还是mounted?他们的区别在那? ### mounted或者created都可以。created时dom还没有加载,适合调用...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

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里面写的话呈现出来的效果视觉上比较友好一些

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • VUE应在那个生命周期获取后台数据?

    VUE应在那个生命周期获取后台数据?

  • 关于elementui popover组件在全屏下的

    关于elementui popover组件在全屏下的

  • 关于Python selenium模块

    关于Python selenium模块

  • sql 关联查询的一个问题

    sql 关联查询的一个问题

腾讯云代理商
海外云服务器