一篇文章带你了解vue.js的事件循环机制
目录
- 一、事件循环机制介绍
- 二、经典事件循环面试题
- 总结
一、事件循环机制介绍
JS是单线程的语言，浏览器和Node.js定义了各自的Event Loop（事件循环机制）则是用来解决异步问题。将程序分为“主线程（执行栈）”与“Event Loop线程”，“主线程”自上而下依次执行同步任务，“Event Loop线程”将异步任务推入宏任务队列与微任务队列去执行。
事件循环机制从整体上告诉了我们 JavaScript 代码的执行顺序 Event Loop 即事件循环，是指浏览器或Node 的一种解决javaScript 单线程运行时不会阻塞的一种机制，也就是我们经常使用异步的原理。“Event Loop线程”先执行宏任务队列，然后执行微任务队列，若微任务在执行过程中产生了新的微任务，则继续执行微任务，微任务执行完毕后，再回到宏任务中进行下一轮循环。即继续先执行宏任务队列，再执行 微任务队列。
宏任务：
script(整体代码)/setTimeout/setInterval/setImmediate/ I/O / UI Rendering
微任务：
process.nextTick()/Promise/Async、Await(实际就是Promise)/MutationObserver(html5新特性)
setTimeout 和 setInterval 等都是任务源，真正进入任务队列的是他们分发的任务。
优先级
setTimeout = setInterval 一个队列setTimeout > setImmediate process.nextTick > Promise
二、经典事件循环面试题
1.在下面这段代码是面试中关于这类问题的经典考题，其中包含了同步、异步任务，几个输出的先后顺序是怎样的。
setTimeout(function(){
console.log('1')
});
new Promise(function(resolve){
console.log('2');
resolve();
}).then(function(){
console.log('3')
});
console.log('4');
// 2,4,3,1
首先进行任务划分，同步任务：new Promise()、console.log('4')；宏任务: setTimeout()；微任务：Promise().then()；Event Loop依次将同步任务推入执行栈并执行，当遇到宏任务或微任务时，推到宏任务或微任务队列中。先执行同步任务，同步队列执行完毕，会去微队列取任务，直到微队列清空，再去宏队列取任务执行。故此段程序执行顺序为：
new Promise()、console.log('4')、Promise().then()、setTimeout()。
2.示例2
答案输出为：async2 end => Promise => async1 end => promise1 => promise2 => setTimeout
3.示例3
mounted(){
this.test();
},
methods:{
test(){
console.log('script start');
this.async1();
setTimeout(function() {
console.log('setTimeout')
}, 0);
new Promise(resolve => {
console.log('Promise')
resolve()
})
.then(function() {
console.log('promise1')
})
.then(function() {
console.log('promise2')
})
console.log('script end')
},
async async1() {
await this.async2()
console.log('async1 end')
},
async async2() {
console.log('async2 end')
},
}
新版的chrome浏览器中不是如上打印的，因为chrome优化了,await变得更快了,输出为:
// script start => async2 end => Promise => script end => async1 end => promise1 => promise2
分析这段代码：
- 执行代码，输出script start。
- 执行async1(),会调用async2(),然后输出async2 end,此时将会保留async1函数的上下文，然后跳出async1函数。
- 遇到setTimeout，产生一个宏任务
- 执行Promise，输出Promise。遇到then，产生第一个微任务
- 继续执行代码，输出script end
- 代码逻辑执行完毕(当前宏任务执行完毕)，开始执行当前宏任务产生的微任务队列，输出promise1，该微任务遇到then，产生一个新的微任务
- 执行产生的微任务，输出promise2,当前微任务队列执行完毕。执行权回到async1
- 执行await,实际上会产生一个promise返回，即
- let promise_ = new Promise((resolve,reject){ resolve(undefined)})
- 执行完成，执行await后面的语句，输出async1 end 最后，执行下一个宏任务，即执行setTimeout，输出setTimeout
- 注意以上分析是旧版浏览器await执行慢导致async1在微任务执行后执行。
总结
本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容!
相关推荐
-
vue中v-for 循环对象中的属性
目录 1.循环对象内的值 2.循环对像 3.循环键和值 1.循环对象内的值 <body> <div id="app"> <!-- 循环对象内的值 --> <ul> <li v-for="item in per"> {{item}} </li> </ul> </div> <script src="./js/vue.js"></scrip
-
Vue.js如何利用v-for循环生成动态标签
目录 前言 一.当写入数据为数组时 二.当写入数据为对象时 三.作用于标签属性和事件 总结 前言 使用v-for可以用于动态生成html标签.其实就是对于vue中属性是对象或者数组进行遍历生成新的标签. v-for就像java中的for循环一样,迭代需要的所有元素. 大多数情况是以一个数组嵌套多个对象的数据进行v-for循环 一.当写入数据为数组时 如果循环遍历得到的value值是一个对象,需要使用里面的值可以用 对象名.key 来调用key对应的value值 v-for写入数组的格式: arr
-
编写 Vue v-for 循环的 7 种方式
目录 1. 始终在v-for循环中使用key 2. 在一定范围内使用v-for循环 3. 避免在循环中使用v-if 4. 使用computed属性或方法 5. 或者在循环外包一层元素 6. 访问循环中的索引 7. 迭代对象 这在碰到诸如以下情况时特别好用: 渲染数组或列表 遍历对象属性 在Vue中v-for循环最基本的用法是这样的: <ul> <li v-for='product in products'> {{ product.name }} </li> </u
-
基于vue实现循环滚动列表功能
注意:需要给父容器一个height和:data='Array'和overfolw:hidden;左右滚动需要给ul容器一个初始化 css width. 先来介绍该组件的用法: 1.安装命令: cnpm install vue-seamless-scroll --save 2.main.js文件中作为全局组件引入 import scroll from 'vue-seamless-scroll' Vue.use(scroll) <vue-seamless-scroll :data="listD
-
Vue实现一种简单的无限循环滚动动画的示例
本文主要介绍了Vue实现一种简单的无限循环滚动动画的示例,分享给大家,具体如下: 先看实现效果: 这种类似轮播的效果,通常可以使用轮播的方案解决,只不过相对于我要分享的方案来说,轮播实现还是要复杂些的. Vue提供了一种过渡动画transition-group,这里我便是利用的这个效果 // template <transition-group name="list-complete" tag="div"> <div v-for="v i
-
详解Vue里循环form表单项实例
有的时候我们可能会遇到这种需求,用户点击某个按钮就可以增加一个同样的表单出来,点击一次增加一次.然后要用到深拷贝,Vue.js+ElementUI等等.效果大概如下,就是一个表单有下拉框和两个输入框,现在点击"添加表单"按钮之后就会多一个表单出来,点击"提交表单"后就同时提交两个表单的value值. 代码如下: <template> <div> <div style="margin: 10px 0"> <
-
一篇文章带你了解vue.js的事件循环机制
目录 一.事件循环机制介绍 二.经典事件循环面试题 总结 一.事件循环机制介绍 JS是单线程的语言,浏览器和Node.js定义了各自的Event Loop(事件循环机制)则是用来解决异步问题.将程序分为“主线程(执行栈)”与“Event Loop线程”,“主线程”自上而下依次执行同步任务,“Event Loop线程”将异步任务推入宏任务队列与微任务队列去执行. 事件循环机制从整体上告诉了我们 JavaScript 代码的执行顺序 Event Loop 即事件循环,是指浏览器或Node 的一种解决
-
一篇文章带你吃透Vue生命周期(结合案例通俗易懂)
目录 1.vue生命周期 1.0_人的-生命周期 1.1_钩子函数 1.2_初始化阶段 1.3_挂载阶段 1.4_更新阶段 1.5_销毁阶段 2.axios 2.0_axios基本使用 2.1_axios基本使用-获取数据 2.2_axios基本使用-传参 2.3_axios基本使用-发布书籍 2.4_axios基本使用-全局配置 3.nextTick和refs知识 3.0$refs-获取DOM 3.1$refs-获取组件对象 3.2$nextTick使用 3.3$nextTick使用场景 3.
-
详解JS浏览器事件循环机制
先来明白些概念性内容. 进程.线程 进程是系统分配的独立资源,是 CPU 资源分配的基本单位,进程是由一个或者多个线程组成的. 线程是进程的执行流,是CPU调度和分派的基本单位,同个进程之中的多个线程之间是共享该进程的资源的. 浏览器内核 浏览器是多进程的,浏览器每一个 tab 标签都代表一个独立的进程(也不一定,因为多个空白 tab 标签会合并成一个进程),浏览器内核(浏览器渲染进程)属于浏览器多进程中的一种. 浏览器内核有多种线程在工作. GUI 渲染线程: 负责渲染页面,解析 HTML,C
-
关于js的事件循环机制剖析
前言 众所周知, JavaScript是单线程这一核心,可是浏览器又能很好的处理异步请求,那么到底是为什么呢?其中的原理与事件循环机制大有关系. 在探索事件循环之前,我们得先了解浏览器执行线程~~ 浏览器的渲染进程是多线程的,浏览器每一个tab标签都代表一个独立的进程,其中浏览器内核属于浏览器多进程中的一种,主要负责页面渲染,脚本执行,事件处理等.其包含的线程有以下几种 GUI 渲染线程:负责渲染页面,解析 HTML,CSS 构成 DOM 树: JS 引擎线程:解释执行代码.用户输入和网络请求:
-
一篇文章带你了解Vue组件的创建和使用
目录 一.什么是组件? 二.创建全局组件 方式一 1.Vue.extend 2.Vue.component 方式二 直接使用Vue.component 方式三 三. 创建局部组件 四.组件中的data 和 methods 五.组件间的通信方式 props/$emit 通过事件形式 总结 一.什么是组件? 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能. 二.创
-
一篇文章带你了解vue路由
目录 概念 Vue Router 简介 Vue Router的特性 Vue Router的使用步骤 分类 嵌套路由 动态路由 命名路由 编程式导航 总结 概念 路由的本质就是一种对应关系,比如说我们在url地址中输入我们要访问的url地址之后,浏览器要去请求这个url地址对应的资源.那么url地址和真实的资源之间就有一种对应的关系,就是路由. 路由分为前端路由和后端路由 1).后端路由是由服务器端进行实现,并完成资源的分发后端路由性能相对前端路由来说较低,所以,我们接下来主要学习的是前端路由2)
-
实例分析js事件循环机制
本文通过实例给大家详细分析了JS中事件循环机制的原理和用法,以下是全部内容: var start = new Date() setTimeout(function () { var end = new Date console.log('Time elapsed:', end - start, 'ms') }, 500) while (new Date() - start < 1000) { } 有其他语言能完成预期的功能吗?Java, 在Java.util.Timer中,对于定时任务的解决方案
-
一文详解JS中的事件循环机制
目录 前言 1.JavaScript是单线程的 2.同步和异步 3.事件循环 前言 我们知道JavaScript 是单线程的编程语言,只能同一时间内做一件事,按顺序来处理事件,但是在遇到异步事件的时候,js线程并没有阻塞,还会继续执行,这又是为什么呢?本文来总结一下js 的事件循环机制. 1.JavaScript是单线程的 JavaScript 是一种单线程的编程语言,只有一个调用栈,决定了它在同一时间只能做一件事.在代码执行的时候,通过将不同函数的执行上下文压入执行栈中来保证代码的有序执行.在
-
实例详解JS中的事件循环机制
目录 一.前言 二.宏.微任务 三.Tick 执行顺序 四.案例详解 1.掺杂setTimeout 2.掺杂微任务,此处主要是Promise.then 3.掺杂async/await 一.前言 之前我们把react相关钩子函数大致介绍了一遍,这一系列完结之后我莫名感到空虚,不知道接下来应该更新有关哪方面的文章.最近想了想,打算先回归一遍JS基础,把一些比较重要的基础知识点回顾一下,然后继续撸框架(可能是源码.也可能补全下全家桶).不积跬步无以至千里,万丈高楼咱们先从JS的事件循环机制开始吧,废话
-
一篇文章带你使用Typescript封装一个Vue组件(简单易懂)
一.搭建项目以及初始化配置 vue create ts_vue_btn 这里使用了vue CLI3自定义选择的服务,我选择了ts.stylus等工具.然后创建完项目之后,进入项目.使用快捷命令code .进入Vs code编辑器(如果没有code .,需要将编辑器的bin文件目录地址放到环境变量的path中).然后,我进入编辑器之后,进入设置工作区,随便设置一个参数,这里比如推荐设置字号,点下.这里是为了生成.vscode文件夹,里面有个json文件. 我们在开发项目的时候,项目文件夹内的文件很