created与mounted执行顺序(关于微任务与宏任务)
1.ps:只要你只使用created或者mounted中的一个不就好了吗【dog】。这样只要在第一个异步任务代码跳出前,嵌套第二个任务函数就好了
最后面的两个链接一个是微任务与宏任务的通俗例子,一个是详解
export default {
created() {
console.log(1)
this.printNum()
console.log(3)
},
mounted() {
console.log(4)
},
methods: {
printNum() {
setTimeout(() => {
console.log(2)
}, 100)
}
}
}
结果是:1 3 4 2
所以并不是mounted要等到created中所有的代码执行结束后才执行
后来查看资料才知道,他们的执行顺序是:created中的同步任务–mounted中的同步任务–created中的异步任务–mounted中的同步任务
这里异步的执行也遵循微任务与宏任务的执行顺序
如果只是比较他们的执行顺序的话,不用考虑太多created与mounted,他们可以理解为将created与mounted放在一起,只是created放在上面,mounted放下面的代码顺序,然后按正常执行顺序执行
2、PS:js是单线程,会先执行同步任务,异步任务在一定时间执行完成后,进入任务队列,所有同步任务执行完成后执行任务队列,如果在created中有异步任务,想让它比mounted中的同步任务先执行,需要给mounted中的同步任务设置setTimeout,超时时间注意要比created中的异步任务时间长
————————————————
版权声明:本文为CSDN博主「weixin_50576800」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/weixin_50576800/article/details/117600153
微任务与宏任务的例子https://www.cnblogs.com/jiasm/p/9482443.html
js中的宏任务与微任务详解https://zhuanlan.zhihu.com/p/78113300
created与mounted执行顺序(关于微任务与宏任务)的更多相关文章
- setTimeout、Promise、Async/Await 的执行顺序
问题描述:以下这段代码的执行结果 async function async1() { console.log('async1 start'); await async2(); console.log( ...
- 详解JavaScript的任务、微任务、队列以及代码执行顺序
摘要: 理解JS的执行顺序. 作者:前端小智 原文:详解JavaScript的任务.微任务.队列以及代码执行顺序 思考下面 JavaScript 代码: console.log("scrip ...
- vue父子组件生命周期执行顺序
之前写了vue的生命周期,本以为明白了vue实例在创建到显示在页面上以及销毁等一系列过程,以及各个生命周期的特点.然而今天被问到父子组件生命周期执行顺序的时候一头雾水,根本不知道怎么回事.然后写了一段 ...
- vue中created、mounted、 computed,watch,method 等方法整理
created:html加载完成之前,执行.执行顺序:父组件-子组件 mounted:html加载完成后执行.执行顺序:子组件-父组件 methods:事件方法执行 watch:watch是去监听一个 ...
- [Vue]vue中各选项及钩子函数执行顺序
在vue中,实例选项和钩子函数和{{}}表达式都是不需要手动调用就可以直接执行的. 一.生命周期图示 二.vue中各选项及钩子函数执行顺序 1.在页面首次加载执行顺序有如下: beforeCreate ...
- vue中的父组件及子组件生命周期的执行顺序
一.没有任何任何显示与隐藏限制条件的情况下: 1.运行的顺序依次是: 父组件created→父组件beforeMounted→子组件created→子组件beforeMounted→子组件mounte ...
- vue父子组件钩子函数的执行顺序
加载渲染过程 父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount-& ...
- Vue相关,vue父子组件生命周期执行顺序。
一.实例代码 父组件: <template> <div id="parent"> <child></child> </div& ...
- vue中父子组件钩子的执行顺序
我们已经非常熟悉单个的vue组件的生命周期执行顺序了,但是,如果有嵌套组件,父子组件的生命周期的执行顺序是什么? 当父子组件在加载的时候,执行的先后顺序为 父beforeCreate -> 父c ...
随机推荐
- 【java】学习路径39-Buffered缓冲输出流
import java.io.BufferedOutputStream; import java.io.FileOutputStream; import java.io.IOException; pu ...
- CF-D. Another Problem About Dividing Numbers
Problem - D - Codeforces 题意:问能否在进行K次操作的情况下,将两个数变得相同,操作为每次选择一因子,然后除该因子. 题解:要判断该数最多能进行几次除的操作,其实就是判断这个数 ...
- KingbaseES V8R6 锁等待检测
背景 对于多数数据库,dba技能之一就是查找锁.锁的存在有效合理的在多并发场景下保证业务有序进行.下面我们看一下KingbaseESV8R6中查找阻塞的方法. 1.找到"被阻塞者" ...
- python 基于aiohttp的异步爬虫实战
钢铁知识库,一个学习python爬虫.数据分析的知识库.人生苦短,快用python. 之前我们使用requests库爬取某个站点的时候,每发出一个请求,程序必须等待网站返回响应才能接着运行,而在整个爬 ...
- Java中如何创建不可变(immutable)类
什么是不可变类 1. 不可变类是指类的实例一经创建完成,这个实例的内容就不会改变. 2. Java中的String和八个基本类型的包装类(Integer, Short, Byte, Long, Dou ...
- 题解 P2471 【[SCOI2007]降雨量】
原题传送门 前置芝士 离散化 ST表和RMQ问题 二分 正文 首先我们来分析一下题意. 题目会给出两个大小为 \(n\) 的数组,\(y\) 和 \(r\) ,其中 \(y_i\) 表示第 \(i\) ...
- Gitea 与 Drone 集成实践:完全基于 Docker 搭建的轻量级 CI/CD 系统
Drone 是一个使用 Go 语言编写的自助式的持续集成平台,和 Gitea 一样可以完全基于容器部署,轻松扩展流水线规模.开发者只需要将持续集成过程通过简单的 YAML 语法写入 Gitea 仓库目 ...
- Linux日志切割方法[Logrotate、python、shell实现方式]
Linux日志切割方法[Logrotate.python.shell实现方式] 对于Linux系统安全来说,日志文件是极其重要的工具.不知为何,我发现很多运维同学的服务器上都运行着一些诸如每天切分 ...
- Zookeeper QuickStart
环境版本 操作系统:CentOS release 6.6 (Final) java版本: jdk1.8 zookeeper版本: zookeeper-3.4.11 一. 安装jdk 此处省略 二. 安 ...
- Readsh中文版初始设置
B站视频教程网址:https://space.bilibili.com/630285695/video 安装成功后,打开浏览器输入http://ip:5000如果出现如下画面,即告安装成功. 初始设置 ...