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. Android平台Camera2数据如何对接RTMP推流到服务器

    1. Camera2架构 在Google 推出Android 5.0的时候, Android Camera API 版本升级到了API2(android.hardware.camera2), 之前使用 ...

  2. electron 起步

    electron 起步 为什么要学 Electron,因为公司需要调试 electron 的应用. Electron 是 node 和 chromium 的结合体,可以使用 JavaScript,HT ...

  3. v-contextmenujs 右键菜单点击

    忙碌了一晚上的"枫师傅"用上了新插件v-contextmenujs,这个插件就按照他的文档来就行 我的使用: <!-- 这里是demo.vue,之所以选择html是为了代码高 ...

  4. Stream流式计算

    Stream流式计算 集合/数据库用来进行数据的存储 而计算则交给流 /** * 现有5个用户,用一行代码 ,一分钟按以下条件筛选出指定用户 *1.ID必须是偶数 *2.年龄必须大于22 *3.用户名 ...

  5. docker垃圾处理

    1 查找docker文件夹 find / -name docker 2 列举文件夹大小 du -h --time --max-depth=1 . df -h df -TH 3 Docker占用磁盘空间 ...

  6. 新版本中的hits.total匹配数说明

    在7.0版发布之前,hits.total始终用于表示符合查询条件的文档的实际数量.在Elasticsearch 7.0版中,如果匹配数大于10,000,则不会计算hits.total. 这是为了避免为 ...

  7. Elasticsearch:如何把Elasticsearch中的数据导出为CSV格式的文件

    本教程向您展示如何将数据从Elasticsearch导出到CSV文件. 想象一下,您想要在Excel中打开一些Elasticsearch中的数据,并根据这些数据创建数据透视表. 这只是一个用例,其中将 ...

  8. Kubernetes生态架构图

    图片来源于:https://gitbook.curiouser.top/ 一.kubernetes 集群架构图 二.Openshift or Kubernetes 集群架构图 三.常见的 CI/CD ...

  9. 第一个Django应用 - 第六部分:静态文件

    前面我们编写了一个经过测试的投票应用,现在让我们给它添加一张样式表和一张背景图片. 除了由服务器生成的HTML文件外,WEB应用一般需要提供一些其它的必要文件,比如图片文件.JavaScript脚本和 ...

  10. 使用Portainer 部署WordPress容器

    安装WordPress容器 进入到 Portainer 页面,选择左边的 Containers 选项,单击上方的 Add container 按钮转到如图所示的页面: 1.在 Name 一栏中输入容器 ...