先分析下生命周期

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. nowcoder907B n的约数

    题意 t次询问,每次给你一个数n,求在[1,n]内约数个数最多的数的约数个数 \(t \le 500,n \le 10^{19}\) 思路 首先可以想到将n质因数分解.即\(n= \prod\limi ...

  2. Linux性能优化实战学习笔记:第二十六讲

    一.案例环境描述 1.环境准备 2CPU,4GB内存 预先安装docker sysstat工具 2.温馨提示 案例中 Python 应用的核心逻辑比较简单,你可能一眼就能看出问题,但实际生产环境中的源 ...

  3. java ++a,a++,--a,a--

    public class Sample { public static void main(String[] args) {int a, b, c, d, e; Scanner s = new Sca ...

  4. markdown格式接口文档模板

    源文件 https://files.cnblogs.com/files/bincoding/%E6%8E%A5%E5%8F%A3%E6%96%87%E6%A1%A3.zip 目录 测试接口 查询指定项 ...

  5. 微信企业号获取OpenID过程

    define('CorpID', "wx82e2c31215d9a5a7"); define('CorpSecret', ""); //当前管理组 设置-> ...

  6. PDMan-2.1.0 正式发布:用心开源,免费的国产数据库建模工具 PowerDesigner

    PDMan是一款开源免费的数据库模型建模工具,支持Windows,Mac,Linux等操作系统,是PowerDesigner之外,更好的免费的替代方案.他具有颜值高,使用简单的特点.包含数据库建模,灵 ...

  7. 大话设计模式Python实现-代理模式

    代理模式(Proxy Pattern):为其他对象提供一种代理以控制对这个对象的访问 #!/usr/bin/env python # -*- coding:utf-8 -*- __author__ = ...

  8. PHP服务端优化全面总结

    一.优化PHP原则 1.1PHP代码的优化 (1)升级最新的PHP版本 鸟哥PPT里的对比数据,就是WordPress在PHP5.6执行100次会产生70亿次的CPU指令执行数目,而在PHP7中只需要 ...

  9. sitecore 将媒体项目关联到为数字营销资产分类

    在创建营销活动时,您可能希望跟踪联系人与媒体项目的交互方式,例如PDF,视频或您网站上的其他文档.您可以通过将媒体项目分类为数字营销资产来实现此目的. 当您应用分类标签到媒体库中的项目时,项目就变成了 ...

  10. 一次kuberneets evicted的历险

    一.概述 kubernetes 的eviction检测diskpresure,检测的是kubelet的root-dir.kubelet的默认root-dir是/var/lib/kubelet,可以使用 ...