axios之Vue请求初始化数据放在Created还是Mounted?
先分析下生命周期
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?的更多相关文章
- vue获取后端数据放在created还是mounted方法里面?
问题提出: 我们知道一般vue使用ajax或者axios来获取后端数据,并且好像放在created里面和mounted里面都可以获取数据并正确渲染.那么放在created里面和mounted里面有什么 ...
- VUE请求本地数据的配置json-server
VUE开发请求本地数据的配置,早期的vue-lic下面有dev-server.js和dev-client.js两文件,请求本地数据在dev-server.js里配置,最新的vue-webpack-te ...
- vue 请求后台数据2(copy)
https://blog.csdn.net/vergilgeekopen/article/details/68954940 需要引用vue-resource 安装请参考https://github.c ...
- 关于Vue实例的生命周期created和mounted的区别
什么是生命周期 Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.卸载等一系列过程,我们称这是Vue的生命周期.通俗说就是Vue实例从创建到销毁的过 ...
- Vue实例的生命周期created和mounted的区别
生命周期先上图 什么是生命周期 Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.卸载等一系列过程,我们称这是Vue的生命周期.通俗说就是Vue实例 ...
- 常用vue请求交互数据方式
几种 vue的数据交互形式 var that=this get请求 that.$http.get("1.txt").then(function(result){ console.l ...
- vue 请求后台数据 (copy)
https://www.cnblogs.com/calledspeed001/p/7094494.html var that=this get请求 that.$http.get("1.txt ...
- vue学习生命周期(created和mounted区别)
created:在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图(例如ajax请求列表). mounted:在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom ...
- vue实例中created、mounted以及其他类型说明
生命周期图示(图片来自coderwhy老师): 每个 Vue 实例在被创建之前都要经过一系列的初始化过程.例如,实例需要配置数据观测(data observer).编译模版.挂载实例到 DOM ,然后 ...
随机推荐
- HTTP协议,到底是什么鬼?
作者 | Jeskson 来源 | 达达前端小酒馆 了解HTTP HTTP是什么呢?它是超文本传输协议,HTTP是缩写,它的全英文名是HyperText Transfer Protocol. 那么什么 ...
- 解决 ora-01795 的问题
''' <summary> ''' 在 oracle 里 , where in 语句有可能造成问题 : ORA-01795:列表中的最大表达式数为1000 ''' 如果我们在拼接where ...
- vue.js三种安装方式
Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件.它不仅易于上手 ...
- 初探Java设计模式5:一文了解Spring涉及到的9种设计模式
本系列文章将整理到我在GitHub上的<Java面试指南>仓库,更多精彩内容请到我的仓库里查看 https://github.com/h2pl/Java-Tutorial 喜欢的话麻烦点下 ...
- sql实现excel中模糊替换
今天遇到项目上需要修改数据库中部分字段 如果一个一个替换的话工作量实在太大,于是找一个办法 update 表名 set 字段名=replace(字段名,'aaaa','cccc') + whereaa ...
- java包学习之JDBC
public class DemoJDBC { public static void main(String[] args) throws ClassNotFoundException, SQLExc ...
- 【转】python实现Telnet操作
# -*- coding: utf-8 -*- import logging import telnetlib import time import sys import os host_ip = ' ...
- 详解golang net之netpoll
golang版本1.12.9:操作系统:readhat 7.4 golang的底层使用epoll来实现IO复用.netPoll通过pollDesc结构体将文件描述符与底层进行了绑定.netpoll实现 ...
- snap应用多版本卸载
Ubuntu18.04新增了几个内置软件使用Snap格式.同样的沙箱式处理方式,除了Canonical主推的Snap,还有Fedora的Flatpak和AppImage.一般正常使用没问题,就是第一次 ...
- 蒙特卡罗方法、蒙特卡洛树搜索(Monte Carlo Tree Search,MCTS)初探
1. 蒙特卡罗方法(Monte Carlo method) 0x1:从布丰投针实验说起 - 只要实验次数够多,我就能直到上帝的意图 18世纪,布丰提出以下问题:设我们有一个以平行且等距木纹铺成的地板( ...