先分析下生命周期

beforecreated:el 和 data 并未初始化
created:完成了 data 数据的初始化,el没有
beforeMount:完成了 el 和 data 初始化
mounted :完成挂载

(1)mounted

  很多人跟我说初始化放在Mounted里面, 我问她(他)们为什么?她(他)们回答说因为这个时候DOM初始化渲染好啦。然后我继续问DOM初始化渲染和请求初始化数据有什么关系?他们会说可以显示请求出来的数据啦。(大家觉得有冲突吗?)

DOM初始化渲染和请求初始化数据并没有什么冲突

  让我们在看看前面的Vue生命周期

  a、beforeCreate:
    (在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用。---官方贴的)

    

  b、beforeMount:

    (在挂载开始之前被调用:相关的 render 函数首次被调用。---官方贴的)

    

  

看了这个2个我们继续分析:

我们请求回来的初始化数据或者基础数据是不是需要挂在Vue的Data上面?(是的,需要√)
然后我们继续beforeCreate的时候Data有没有生成?(答案是:没有。×)
--所以这一步是无法把数据挂到Vue的Data上面的
然后我继续看created的时候Data有没有生成?(答案是:生成啦。√)
--所以这一步我们是可以把数据挂到Vue的Data上面的,是不是可以放在这里啦?
--是的,可以放在这里啦。所以最后结论就是放在created里面。

补充分析:

(1)mounted

  如果把所有请求放在created里面的话,请求过多会,加载太慢会导致页面出现短暂的白屏情况,一般上我写的话,接口不复杂会放created里面,接口多复杂的话会放在mounted里面.

(2)mounted

  created 是加载DOM,html之后 就马上执行, 比如初始化,获取屏幕高度调整,赋值等等,而mounted就是执行包括js之后,准备开始调用方法,也就是说 类似传统开发那样,先加载jquery 再调用插件

.

axios之Vue请求初始化数据放在Created还是Mounted?的更多相关文章

  1. vue获取后端数据放在created还是mounted方法里面?

    问题提出: 我们知道一般vue使用ajax或者axios来获取后端数据,并且好像放在created里面和mounted里面都可以获取数据并正确渲染.那么放在created里面和mounted里面有什么 ...

  2. VUE请求本地数据的配置json-server

    VUE开发请求本地数据的配置,早期的vue-lic下面有dev-server.js和dev-client.js两文件,请求本地数据在dev-server.js里配置,最新的vue-webpack-te ...

  3. vue 请求后台数据2(copy)

    https://blog.csdn.net/vergilgeekopen/article/details/68954940 需要引用vue-resource 安装请参考https://github.c ...

  4. 关于Vue实例的生命周期created和mounted的区别

    什么是生命周期 Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.卸载等一系列过程,我们称这是Vue的生命周期.通俗说就是Vue实例从创建到销毁的过 ...

  5. Vue实例的生命周期created和mounted的区别

    生命周期先上图 什么是生命周期 Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.卸载等一系列过程,我们称这是Vue的生命周期.通俗说就是Vue实例 ...

  6. 常用vue请求交互数据方式

    几种 vue的数据交互形式 var that=this get请求 that.$http.get("1.txt").then(function(result){ console.l ...

  7. vue 请求后台数据 (copy)

    https://www.cnblogs.com/calledspeed001/p/7094494.html var that=this get请求 that.$http.get("1.txt ...

  8. vue学习生命周期(created和mounted区别)

    created:在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图(例如ajax请求列表). mounted:在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom ...

  9. vue实例中created、mounted以及其他类型说明

    生命周期图示(图片来自coderwhy老师): 每个 Vue 实例在被创建之前都要经过一系列的初始化过程.例如,实例需要配置数据观测(data observer).编译模版.挂载实例到 DOM ,然后 ...

随机推荐

  1. Linux性能优化实战学习笔记:第四十五讲

    一.上节回顾 专栏更新至今,四大基础模块的最后一个模块——网络篇,我们就已经学完了.很开心你还没有掉队,仍然在积极学习思考和实践操作,热情地留言和互动.还有不少同学分享了在实际生产环境中,碰到各种性能 ...

  2. skip connections

    deep learning初学者,最近在看一些GAN方面的论文,在生成器中通常会用到skip conections,于是就上网查了一些skip connection的博客,虽然东西都是人家的,但是出于 ...

  3. Docker 创建、运行、查看、删除容器

    Docker 创建.运行.查看.删除容器 Step 1: 查看docker程序是否存在, 功能是否正常. sudo docker info 若不正常请参考下文: Docker安装和程序创建 Step ...

  4. 在ubuntu下安装openjdk

    OpenJDK是JDK的开放源码版本,以GPL(General Public License,通用性公开许可证)协议的形式放出.因为授权协议的原因,Sun公司实现的JDK的一部分源码因为产权的问题无法 ...

  5. Spring Boot2.0以上版本EmbeddedServletContainerCustomizer被WebServerFactoryCustomizer替代

    在Spring Boot2.0以上配置嵌入式Servlet容器时EmbeddedServletContainerCustomizer类不存在,经网络查询发现被WebServerFactoryCusto ...

  6. 【spring boot】spring boot 基于redis pipeline 管道,批量操作redis命令

    spring boot 2.x 使用RedisTemplate 操作 =================================== 1.pom.xml <!--spring2.0集成r ...

  7. 学习Linq之前必须知道的几种语法糖

         » 引用百度解释: 语法糖(Syntactic sugar),也译为糖衣语法,是由英国计算机科学家彼得·约翰·兰达(Peter J. Landin)发明的一个术语,指计算机语言中添加的某种语 ...

  8. c#在sqlserver中使用EF框架

    vs2017,sqlserver2017(localdb)调试通过.在sqlserver中创建数据库d1,表t1如下: 录入数据如下: 在vs新建任意项目,此处以控制台为例.添加数据模型Model1: ...

  9. lumen 响应宏

    响应宏 laravel 中的响应宏,说明文档中有,lumen的没有找到.于是参考laravel 项目中的响应宏写了个Lumen的 1. 新建文件 App\Providers\ResponseMacro ...

  10. iOS - 逆向调试自用工具(reveal 14 Hopper Go2Shell ifunboxmac MachOView Alfred Go2Shell iTerm)

    研究了挺长一段时间的逆向感觉没啥可弄的了,再深处对我也用处不大,渐渐兴趣有些掉头了.最近有问我要工具的朋友,分享一些常用工具给用到的朋友. 用法自己百度吧,这里不再赘述. 图例(希望看到你想要的): ...