Vue created/mounted 异步获取不到data中的数据
最近在开发时遇到了个小坑，在没详细了解Vue的生命周期前，总以为mounted函数一定会在created函数完成后执行，但实则不然。
如果呈现在页面上的数据是静态的，比如说像下面这样数据是写死不变化的，那么mounted函数中的方法获取模型层中的这些值是能获取的↓
export default {data() {return {dataList: [1,2，3,4，5,6]};},
注意注意注意！但如果大家的模型层数据是从后台动态响应返回的，那么你肯定会遇到这么一个问题，为什么我mounted函数中的方法获取模型层数据是空的了？？
经过我查看了：Vue.js 生命周期官方介绍，我才了解到：created和mounted执行时，异步初始化还没执行（还没执行完），也就是created里的数据还没获取到，mounted就开始了渲染视图的工作，那么这时模型层数据肯定就是为空的啦，而mounted只会调用一次，这就陷入了一个死局，mounted永远等不到created获取完数据后在渲染，那么解决的方法就是为mounted中的方法设置一个定时器，因为created获取数据的速度是很快的，我们只用让mounted停那么一丢丢时间就ok了！
解决方法：设定等待一个时间，确保你的初始值都已经被初始化在渲染视图↓
mounted:function() {setTimeout(() => {this.draw();}, 1000)},
本次分享到此结束，谢谢大家阅读！！
最近忙着各种项目，博客会尽量更新的！！
Vue created/mounted 异步获取不到data中的数据相关推荐
- Vue 在beaforeCreate时获取data中的数据
众所周知,vue在beforecreate时期是获取不到data中的 数据的 但是通过一些方法可以实现在beforecreate时获取到data中的数据 暂时想到两种放发可以实现,vue在before ...
- mouted能不能访问data中的数据_Vue(定时器)解决mounted不能获取到data中的数据问题...
vue中data定义 data() { return { isok:10, } } 在vue中使用定时器 如下 mounted是钩子函数 mounted(){ console.log(this.iso ...
- [vue] vue在created和mounted这两个生命周期中请求数据有什么区别呢？
[vue] vue在created和mounted这两个生命周期中请求数据有什么区别呢? 看实际情况,一般在 created(或beforeRouter) 里面就可以,如果涉及到需要页面加载完成之后的 ...
- 谈谈你对生命周期的理解？在created和mounted这两个生命周期中请求数据有什么区别呢？
一.什么是生命周期? 我理解的生命周期就是:从出生到死亡的过程 二.生命周期有哪些? Vue生命周期总共可以分为8个阶段:创建前后, 载入前后,更新前后,销毁前销毁后 生命周期 描述 beforCre ...
- filters获取data中的数据
第一种方式:申明全局变量,改变this方法. 在对应的组件中申明全局变量 在beforeCreated申明周期中修改this的指向,并在filters中使用.就可以获取data中申明的options数 ...
- vue父组件异步获取动态数据传递给子组件获取不到值
原理: 在父组件中使用axios获取异步数据传给子组件,但是发现子组件在渲染的时候并没有数据,在created里面打印也是空的,结果发现一开始子组件绑定的数据是空的,在请求数据没有返回数据时,子组件就 ...
- vue更新data中的数据页面不渲染_vue更新obj类data的属性无效，页面data没刷新解决方法vue.set...
问题描述 Vue的data使用有坑啊,它不能直接修改创建的对象的属性,例如想要给 user 添加一个 name 属性,值是 Jay . 先来一个添加的错误示例(这是一个大坑,请注意),这样写页面不渲染 ...
- 请描述下你对 Vue 生命周期的理解？在 created 和 mounted 这两个生命周期中请求数据有什么区别呢？
Vue 生命周期总共可以分为8个阶段:初始化前后,挂载前后,更新前后,销毁前后,以及一些特殊场景的生命周期. 一.基本生命周期 生命周期 描述 beforeCreate 组件实例被创建之初 creat ...
- Vue生命周期函数异步获取数据时的问题
由于async await的作用,created生命周期函数会被加入到微任务的事件队列,所以会先继续向下执行其他函数,等执行完了宏任务,最后在执行事件队列中的微任务. beforeCreate() { ...
最新文章
- NYOJ-括号配对问题 技巧性的非栈道法
- python基础知识整理-python入门基础知识点整理-20171214
- java openssl 开发_java openssl
- java网络编程udp_Java网络编程之UDP
- String.getBytes()和new String()
- java lambda 表达式中的双冒号和箭头的用法 ：：
- 初识C++之函数重载
- redis 入门总结
- 微信小程序 input隐藏和不可操作的设置
- matlab中二阶偏导数,MATLAB中带有两个变量的函数的一阶和二阶偏导数
- 边界路由linux,路由表构成简介（Destination/Gateway/Genmask/Iface）
- 本周最新文献速递20210718
- 病案首页计算机管理系统功能一般不包括,病案管理系统
- VMware虚拟机配置IP地址
- vector＜int＞ v 与 vector＜int＞ v(n) 的区别
- [转载]机器人工程师的漫漫长路
- RDKit | 子结构搜索和MCS算法
- 计算机毕业设计Java学生网上请假系统（源码+系统+mysql数据库+Lw文档）
- CTF：PHP MD5函数0E绕过漏洞
- UG10下载的一波三折和教训经验