目录

一、for,forEach,map的区别

二、promise理解

三、宏任务和微任务

1.宏任务

2.微任务

3.vue中的nextTick

一、for,forEach,map的区别

1.终止循环:for通过break关键字来终止循环，forEach和map不可以；

2.跳过此次循环：for通过continue来跳过，forEach通过return来跳过，map不能跳过；

3.返回值：for和forEach没有返回值，map返回一个数组，在map的回调函数中，不使用return返回的话，会返回undefined；

4.改变原数组：for和forEach可以改变原数组，map不可以改变原数组；

5.代码量：for的代码量比forEach和map要多。

二、promise理解

1.promise本身是一个构造函数，解决异步的方法，可以用来实例化一个对象；

2.对象身上有三种状态：pending(待定)、fulfilled(兑现-成功)、rejected(拒绝-失败),状态的改变只能由pending变成fulfilled或rejected，一经改变，就不能发生改变了

3.对象身上有resolve、reject、all，原型上有then、catch方法，promise本身是同步的， .then是异步的；

4.  all与then同级的另一个方法，all方法，该方法提供了并行执行异步操作的能力，并且在所有异步操作执行完后并且执行结果都是成功的时候才执行回调；有错就不执行。

  all是等所有的异步操作都执行完了再执行then方法，那么race方法就是相反的，谁先执行完成就先执行回调。先执行完的不管是进行了race的成功回调还是失败回调，其余的将不会再进入race的任何回调；只要有错就不执行。

  allSettled等待全部的Promise执行，无论对错，返回对象数组（数组嵌套对象），包含状态和信。

三、宏任务和微任务

1.宏任务

script(整体代码)、setTimeout、setInterval、I/O操作(输入输出，比如:读取文件操作、网络请求)、UI交互事件、postMessage、MessageChannel、setImmediate(Node.js 环境)、异步ajax、DOM事件等

优先级：主代块>setImmediate>MessageChannel>setTimeout>setInterval>i/o操作>异步ajax

注意：setImmediate没有时间参数,它与延迟0毫秒的setTimeout()回调非常相似。所以当setTimeout延迟时间也是0毫秒时，谁在前面就先执行谁。

        此外如果setTimeout延迟时间不是0毫秒，它的执行顺序将会在 i/o操作之后。

2.微任务

Promise.(then、catch、finally)、

MutaionObserver（监听DOM树的变化，h5新特性，只存在浏览器当中）、

process.nextTick(Node.js 环境)，

async/await（实际上是promise+generator的语法糖，也就是promise，也就是微观任务），Object.observe(用来实时监测js中对象的变化)

优先级：process.nextTick>Promise=MutationObserver

3.vue中的nextTick

Vue.nextTick()是vue的全局api，它主要用来在下次dom更新循环结束之后执性延迟回调。在修改数据之后立即使用这个方法，获取更新后的dom

由于vue的更新机制是异步的，所以当数据修改之后，dom还停留在更新之前，此时想要获取更新之后的dom，可以使用 nextTick，表示的是下次dom更新循环结束后执行的回调。

应用场景：created中获取dom可以使用nextTick

<!DOCTYPE html>
<html lang="en">
 
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
</head>
 
<body>
	<div id="app">
		<ul ref="container">
			<li v-for="(item,index) in arr" :key="index">{{item}}</li>
		</ul>
		<button @click="add">增加</button>
	</div>
	<script>
		new Vue({
			el: "#app",
			data() {
				return {
					arr: ['zhangsan', 'lisi', 'wangwu']
				}
			},
			created() {
				// 使用nextTick可以在created生命周期获取dom节点
				this.$nextTick(() => {
					console.log(this.$refs.container);
				})
			},
			methods: {
				add() {
					this.arr.push(parseInt(Math.random() * 10));
					// 使用nextTick获取数据更新后的dom
					this.$nextTick(() => {
						console.log(this.$refs.container.childNodes);
					});
				}
			}
		})
	</script>
</body>
 
</html>