nextTick作用及原理

        nextTick作用及原理

        nextTick方法，它用于在dom更新之后执行回调函数。
        next方法可以用来确保在更新dom后进行一些操作或获取最新的dom元素
        Vue 的 nextTick 其本质是对 JavaScript 执行原理 EventLoop 的一种应用。
        nextTick的核心是利用了如promise、MutationObserver、setImmediate、setTimeout的原生 JavaScript 方法来模拟对应的微 / 宏任务的实现，本质是为了利用 JavaScript 的这些异步回调任务队列来实现 Vue 框架中自己的异步回调队列。

        它就是一个异步方法。nextTick方法主要是 使用了宏任务和微任务（eventloop），定义了一个异步方法，多次调用nextTick会将方法存入队列中，通过这个异步方法清空当前队列
        nextTick是将回调函数延迟在下一次dom更新数据后调用，简单理解是：当数据更新了，在dom中渲染后，自动执行该函数。所有放在Vue.nenxtTick()回调函数中的执行的应该是会对dom进行操作的js代码

        使用nextTick保证当前视图渲染完成。

        promise是浏览器内部自己实现的一个微任务，内部使用的不是setTimeout，详细请看面试题中的promise总结。

        nextTick中定义的三个重要变量：
        1.callbacks：用来存储所有需要执行的回调函数

        2.pending：用来标志是否正在执行回调函数

        3.timerFunc：用来触发执行回调函数、

        nextTick的使用场景：
        1. 在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中。created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的就是mounted钩子函数，因为该钩子函数执行时所有的DOM挂载已完成。

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

        nextTick和$nextTick区别
        1.nextTick(callback)：当数据发生变化，更新后执行回调。在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

        2.$nextTick(callback)：当dom发生变化，更新后执行的回调。将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。

        3.这两个方法没有太大的不同。区别在于：nextTick(callback) 是全局的方法；而 $nextTick(callback) 是回调的 this 自动绑定到调用它的实例上；所以用的更多的是$nextTick(callback)！

        原理：当调用nextTick方法时会传入两个参数，回调函数和执行回调函数的上下文环境，如果没有提供回调函数，那么将返回promise对象。首先将拿到的回调函数存放到数组中，判断是否正在执行回调函数，如果当前没有在pending的时候，就会执行timeFunc，多次执行nextTick只会执行一次timerFunc，timeFunc其实就是执行异步的方法，在timeFunc方法中选择一个异步方法（首先判断是否支持promise，如果支持就将flushCallbacks放在promise中异步执行，并且标记使用微任务。如果不支持promise就看是否支持MutationObserver方法，如果支持就new了一个MutationObserver类，创建一个文本节点进行监听，当数据发生变化了就会异步执行flushCallbacks方法。如果以上两个都不支持就看是否支持setImmediate方法，如果支持setImmediate 就去异步执行flushCallbacks方法。如果以上三种方法都不支持，就使用setTimeout），然后异步去执行flushCallbacks方法，flushCallbacks中就是将传递的函数依次执行。

        nextTick多次调用会维持一个数组，之后会异步的把数组中的方法以此执行，这样的话用户就会在视图更新之后再获取到真实的dom元素。