Vue中$nextTick原理和setTimeOut运行机制

Vue中$nextTick

原理

• Vue 在内部对异步队列尝试使用原生的 Promise.then、MutationObserver 和 setImmediate
• 如果执行环境不支持，则会采用 setTimeout(fn, 0) 代替

为什么使用？

• 在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中

• 在created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的就是mounted()钩子函数，因为该钩子函数执行时所有的DOM挂载和渲染都已完成，此时在该钩子函数中进行任何DOM操作都不会有问题 。

• 在数据变化后要执行的某个操作，而这个操作需要使用随数据改变而改变的DOM结构的时候，这个操作都应该放进Vue.nextTick()的回调函数中。

setTimeout运行机制

• setTimeout和setInterval的运行机制是，将指定的代码移出本次执行，等到下一轮Event Loop时，再检查是否到了指定时间。
• 如果到了，就执行对应的代码；如果不到，就等到再下一轮Event Loop时重新判断。
• 这意味着，setTimeout指定的代码，必须等到本次执行的所有代码都执行完，才会执行。
• 每一轮Event Loop时，都会将“任务队列”中需要执行的任务，一次执行完。
• setTimeout和setInterval都是把任务添加到“任务队列”的尾部。
• 因此，它们实际上要等到当前脚本的所有同步任务执行完，然后再等到本次Event Loop的“任务队列”的所有任务执行完，才会开始执行。
• 由于前面的任务到底需要多少时间执行完，是不确定的，所以没有办法保证，setTimeout和setInterval指定的任务，一定会按照预定时间执行。