Vue习题练习-Question two

题目

问题分析

题目是正确打印h1标签宽度的选项是

首先我们要正确h1标签的宽度，就得了解到事件循环机制，整个渲染的过程

事件循环机制指的是先同步再异步，异步中先微任务，在宏任务

javascript是一门单线程语言，什么是单线程语言，通俗的来说就是一个一个执行，从上到下执行。如下：

console.log(1111)
console.log(2222)
console.log(3333)

以上代码在控制台的打印如下：

当我们改变一下顺序如下：

console.log(3333)
console.log(2222)
console.log(1111)

这是控制台的打印如下：

可以清晰的看见以上代码都是从上到下的执行

像console.log属于同步任务，而有一些任务他是异步的，他们一般是微任务和宏任务

微任务：Promise.then/catch，process.nextTick

宏任务：setTimeout，setInterval

如下代码，可以看到是同步任务先执行还是异步任务先执行：

setTimeout(()=>{
	console.log(1)
},0)
console.log(3333)
console.log(2222)
console.log(1111)

执行结果如下：

如上，我们的异步任务setTimeout是放在最前面的，上面的代码中提到过，js执行是从上往下执行的，但是，这次异步任务却到最后才执行。
这就是因为事件循环机制的原因，会先执行同步任务，在执行异步任务
在同步任务中会渲染我们的dom和同步代码，执行完毕后，才会执行异步任务

所以在上面的选项中，我们可以确认setTimeout，setInterval，nextTick是可以获取我们h1的宽度，console.log不能获取到

最后我们的答案就是setTimeout，setInterval，nextTick可以获取h1的宽度

这道题的重点就是考查我们事件循环机制，事件循环机制就是先同步在异步