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】学习路径34-文件IO练习题
练习题: 1.检测某目录(scr目录为例)下java源程序文件的数量. 参考思路: 首先获取到scr目录,然后使用list()获取所有名字,再使用String类下的endsWith方法检查即可. 参考 ...
- 【java】学习路径32-绝对路径与相对路径
获取文件路径的时候,我们发现有两个方法,getAbsolutePath和getPath两个方法. 前者是获取绝对路径,后者是相对路径. 绝对路径指的是完整路径,从盘符开始. 相对路径指的是从java当 ...
- vscode 快速注释和撤回快捷键
好家伙,天天忘,建议先练个十遍上手 1.快捷行注释 Ctrl + / 2.快捷块注释 Alt + Shift + A 3.撤回 Ctrl + Z 4.恢复撤回(撤回你的撤回) Ctrl + Shift ...
- KingbaseES R6 集群启动‘incorrect command permissions for the virtual ip’故障案例
案例说明: KingbaseES R6集群启动时,出现"incorrect command permissions for the virtual ip"故障,本案例介绍了如何分析 ...
- 如何结合整洁架构和MVP模式提升前端开发体验(二) - 代码实现篇
上一篇文章介绍了整体架构,接下来说说怎么按照上图的分层结构实现下面的增删改查的功能. 代码结构 vue userManage └── List ├── api.ts ├── EditModal │ ├ ...
- day40-网络编程02
Java网络编程02 4.TCP网络通信编程 基本介绍 基于客户端--服务端的网络通信 底层使用的是TCP/IP协议 应用场景举例:客户端发送数据,服务端接收并显示控制台 基于Scoket的TCP编程 ...
- 使用django_registration框架实现用户的注册与激活
1.前言 本节内容是在以下环境中实现的. python version: 3.7 Django version: 3.1.1 Django-registration version: 3.1.1 如版 ...
- harbor官方关于创建https的有关命令
官方地址:https://goharbor.io/docs/2.0.0/install-config/configure-https/ 命令总结: openssl genrsa -out ca.key ...
- Kubernetes 多租户:资源配额
资源配额用于管理命名空间中对象使用的资源量,我们可以按 CPU 和内存用量或对象数量来设置配额.通过资源配额,可以确保租户不会使用超过其分配份额的集群资源. 资源配额是通过 ResourceQuota ...
- Minio VS Ceph
文章转载自:https://blog.csdn.net/Moolight_shadow/article/details/123204412