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执行顺序(关于微任务与宏任务)的更多相关文章

  1. setTimeout、Promise、Async/Await 的执行顺序

    问题描述:以下这段代码的执行结果 async function async1() { console.log('async1 start'); await async2(); console.log( ...

  2. 详解JavaScript的任务、微任务、队列以及代码执行顺序

    摘要: 理解JS的执行顺序. 作者:前端小智 原文:详解JavaScript的任务.微任务.队列以及代码执行顺序 思考下面 JavaScript 代码: console.log("scrip ...

  3. vue父子组件生命周期执行顺序

    之前写了vue的生命周期,本以为明白了vue实例在创建到显示在页面上以及销毁等一系列过程,以及各个生命周期的特点.然而今天被问到父子组件生命周期执行顺序的时候一头雾水,根本不知道怎么回事.然后写了一段 ...

  4. vue中created、mounted、 computed,watch,method 等方法整理

    created:html加载完成之前,执行.执行顺序:父组件-子组件 mounted:html加载完成后执行.执行顺序:子组件-父组件 methods:事件方法执行 watch:watch是去监听一个 ...

  5. [Vue]vue中各选项及钩子函数执行顺序

    在vue中,实例选项和钩子函数和{{}}表达式都是不需要手动调用就可以直接执行的. 一.生命周期图示 二.vue中各选项及钩子函数执行顺序 1.在页面首次加载执行顺序有如下: beforeCreate ...

  6. vue中的父组件及子组件生命周期的执行顺序

    一.没有任何任何显示与隐藏限制条件的情况下: 1.运行的顺序依次是: 父组件created→父组件beforeMounted→子组件created→子组件beforeMounted→子组件mounte ...

  7. vue父子组件钩子函数的执行顺序

    加载渲染过程 父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount-& ...

  8. Vue相关,vue父子组件生命周期执行顺序。

    一.实例代码 父组件: <template> <div id="parent"> <child></child> </div& ...

  9. vue中父子组件钩子的执行顺序

    我们已经非常熟悉单个的vue组件的生命周期执行顺序了,但是,如果有嵌套组件,父子组件的生命周期的执行顺序是什么? 当父子组件在加载的时候,执行的先后顺序为 父beforeCreate -> 父c ...

随机推荐

  1. java方法---可变参数

    可变参数 在方法的声明中,在指定参数类型后面加一个...(省略号) 一个方法中只能指定一个可变参数,它必须是方法的最后一个参数,任何普通参数必须在它之前声明:

  2. 使用【阿里云】服务器、【Xshell】搭建自己的【网站】—— { }

    重置实例密码 打开Xshell连接主机 Apache 服务 安装 yum install httpd* -y 操作 启动 systemctl start httpd.service 查看状态 syst ...

  3. TortoiseSVN 执行清理( cleanUp )失败的解决方案

    TortoiseSVN 执行清理( cleanUp )失败的解决方案 今天碰到了一个比较棘手的问题,在这里做一下记录,以方便自己和有需要的朋友在之后碰到该类问题时有个参考. 现象 更新SVN时弹出清理 ...

  4. 【疑难杂症】关于Transformer到底是什么

    在学习transform的时候,很多视频上来就是一张图开始解释图里面残差网络,self-attention等等巴拉巴拉的意思,然后组装,看也看完了,但是还是不明白transformer和selfatt ...

  5. Kubernetes DevOps: Jenkins Pipeline (流水线)

    要实现在 Jenkins 中的构建工作,可以有多种方式,我们这里采用比较常用的 Pipeline 这种方式.Pipeline,简单来说,就是一套运行在 Jenkins 上的工作流框架,将原来独立运行于 ...

  6. Python对字符数据进行清洗

    import re mystr = "hahaAAA哈哈綂123./!#鱫愛" str1 = ''.join(re.findall('[\u4e00-\u9fa5]',mystr) ...

  7. Linux 下模拟制作块设备并挂载

    Linux 下模拟制作块设备并挂载 作者:Grey 原文地址: 博客园:Linux 下模拟制作块设备并挂载 CSDN:Linux 下模拟制作块设备并挂载 环境 CentOS-7 下载地址:下载 Cen ...

  8. Git、TortoiseGit中文安装教程,如何注册Gitee账号进行代码提交,上传代码后主页贡献度没显示绿点(详解)

    今天给大家分享的是 Git 软件和 TortoiseGit 图形化软件的详细安装教程以及如何在 gitee 上进行代码提交. 首先我也是个刚接触 gitee 的一个小白用户,这些都是自己一边学一边记录 ...

  9. PHP cURL抓取网上图片

    cURL的底层是由一个命令行工具实现的,用于获取远程文件或传输文件,更多的情况是用来模拟get/post表单提交.也可以用户文件上传,爬取文件,支持FTP/FTPS,HTTP/HTTPS等协议,通俗来 ...

  10. java.lang.ClassNotFoundException: org.springframework.web.filter.CharacterEncodingFilter 增样将jar包导入

    2021-9-30-17:28 遇到的一个bug.以前遇到过,这次又遇到.就离谱,结果还忘记怎样解决了.这捣鼓一下,那捣鼓一下,又给搞好了.为了记录这次bug,又试图还原bug. 1.解决办法file ...