简单理解vue中的 nextTick

官网解释

可能你还没有注意到，Vue 异步执行 DOM 更新。只要观察到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据改变。如果同一个 watcher 被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作上非常重要。然后，在下一个的事件循环“tick”中，Vue 刷新队列并执行实际 (已去重的) 工作。Vue 在内部尝试对异步队列使用原生的 Promise.then 和 MessageChannel，如果执行环境不支持，会采用 setTimeout(fn, 0) 代替。

例如，当你设置 vm.someData = ‘new value’ ，该组件不会立即重新渲染。当刷新队列时，组件会在事件循环队列清空时的下一个“tick”更新。多数情况我们不需要关心这个过程，但是如果你想在 DOM 状态更新后做点什么，这就可能会有些棘手。虽然 Vue.js 通常鼓励开发人员沿着“数据驱动”的方式思考，避免直接接触 DOM，但是有时我们确实要这么做。为了在数据变化之后等待 Vue 完成更新 DOM ，可以在数据变化之后立即使用 Vue.nextTick(callback) 。这样回调函数在 DOM 更新完成后就会调用。

如果同一个 watcher 被多次触发，只会被推入到队列中一次这句话什么意思呢？举个例子就知道了。

   <div id="example">
        {
    
    {
    
     msg }}
   </div>

<script type="text/javascript">
var vm = new Vue({
    
    
    el: '#example',
    data: {
    
    
        msg: 1
    },
    created(){
    
    
        this.msg = 1
        this.msg = 2
        this.msg = 3
    },
    watch: {
    
    
        msg(){
    
    
            console.log(this.msg)
        }
    }
})
</script>

浏览器控制台会输出什么呢？答案是3，而不是1、2、3。这就是官网说的多次触发，只会被推入队列一次。
再看个例子

  <div id="example">
        {
    
    {
    
     msg }}
    </div>

var vm = new Vue({
    
    
    el: '#example',
    data: {
    
    
        msg: '123'
    }
})
vm.msg = 'new message'
console.log(1)
console.log(vm.$el.innerText)
console.log(2)
Vue.nextTick(()=>{
    
    
    console.log(vm.$el.innerText)
})
console.log(3)
</script>

在谷歌浏览器控制台中的输出是

1
123
2
3
new message

是不是和想象中不太一样，为什么最后打出的是’new message’而不是代码的最后3，为什么第一次打印vm.$el.innerText是123，而不是赋值后的’new message’这个就要了解一下JavaScript的EventLoop，这个稍后会说，再来看一个例子，这个例子也是之前我为什么取不到div实例的简化版

  <div id="example">
        <div v-for="i in number" :ref="'div'+i" v-if="number > 0">{
    
    {
    
    i}}</div>
        <button @click="addNumber">点击</button>
    </div>

<script type="text/javascript">
var vm = new Vue({
    
    
    el: '#example',
    data: {
    
    
        number: 0
    },
    methods:{
    
    
        addNumber(){
    
    
            this.number = 3
            console.log(1)
            console.log(this.$refs['div1'])
            console.log(2)
            this.$nextTick(()=>{
    
    
                console.log(this.$refs['div1'])
            })
            console.log(3)
        }
    }
})
</script>

打印结果为

1
undefined
2
3
[div]

可以看到第一次并没有取到id为div1的div元素，在nextTick里面就取到了。这个就对应官网里面的为了在数据变化之后等待 Vue 完成更新 DOM ，可以在数据变化之后立即使用 Vue.nextTick(callback)

Javascript EventLoop (事件循环)

上面那么多奇怪的行为其实和JavaScript的EventLoop有很大的关系，下面我就尝试着解释一下这个EventLoop。
有一个比较有名的视频是解释这个的，Philip Roberts的演讲《Help, I’m stuck in an event-loop》，虽然是纯英文，但是配合PPT上面的动画还是能看懂的。我把阮一峰老师的解释直接复制粘贴过来吧，因为写的确实很好。

为什么JavaScript是单线程？

JavaScript语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。那么，为什么JavaScript不能有多个线程呢？这样能提高效率啊。

JavaScript的单线程，与它的用途有关。作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题。比如，假定JavaScript同时有两个线程，一个线程在某个DOM节点上添加内容，另一个线程删除了这个节点，这时浏览器应该以哪个线程为准？

所以，为了避免复杂性，从一诞生，JavaScript就是单线程，这已经成了这门语言的核心特征，将来也不会改变。

为了利用多核CPU的计算能力，HTML5提出Web Worker标准，允许JavaScript脚本创建多个线程，但是子线程完全受主线程控制，且不得操作DOM。所以，这个新标准并没有改变JavaScript单线程的本质。

任务队列

单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。如果前一个任务耗时很长，后一个任务就不得不一直等着。

如果排队是因为计算量大，CPU忙不过来，倒也算了，但是很多时候CPU是闲着的，因为IO设备（输入输出设备）很慢（比如Ajax操作从网络读取数据），不得不等着结果出来，再往下执行。

JavaScript语言的设计者意识到，这时主线程完全可以不管IO设备，挂起处于等待中的任务，先运行排在后面的任务。等到IO设备返回了结果，再回过头，把挂起的任务继续执行下去。

于是，所有任务可以分成两种，一种是同步任务（synchronous），另一种是异步任务（asynchronous）。同步任务指的是，在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；异步任务指的是，不进入主线程、而进入"任务队列"（task queue）的任务，只有"任务队列"通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行。
具体来说，异步执行的运行机制如下。（同步执行也是如此，因为它可以被视为没有异步任务的异步执行。）

（1）所有同步任务都在主线程上执行，形成一个执行栈（execution context stack）。
（2）主线程之外，还存在一个"任务队列"（task queue）。只要异步任务有了运行结果，就在"任务队列"之中放置一个事件。
（3）一旦"执行栈"中的所有同步任务执行完毕，系统就会读取"任务队列"，看看里面有哪些事件。那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行。
（4）主线程不断重复上面的第三步。

主线程从"任务队列"中读取事件，这个过程是循环不断的，所以整个的这种运行机制又称为Event Loop（事件循环）。
在这里插入图片描述

主线程在运行的时候会产生堆栈，堆就是存储变量，栈记录执行的顺序，如果碰到回调函数、DOM操作比如点击、鼠标移上去等、setTimeout操作会放到任务队列，只有栈中的代码执行完毕才会从任务队列取出代码，进行执行。所以这也是为什么上面代码例子中虽然console.log(3)在代码最后，但是比nextTick里面的代码先输出。你可以这么理解，一堆代码，该放到stack里面的方法，放到stack里面，然后这堆代码里面的异步操作放到任务队列里面，然后执行栈里面的代码，栈里面的代码执行完毕，执行任务队列里面的代码，所以代码的执行顺序和写的顺序并不是一直的。

任务队列

上面的任务队列分为两种，执行顺序也是有一点差别的，Macrotasks 和 Microtasks

Macrotasks: setTimeout, setInterval, setImmediate, I/O, UI rendering
Microtasks: process.nextTick, Promises, Object.observe(废弃), MutationObserver
Macrotasks 和 Microtasks有什么区别呢？我们以setTimeout和Promises来举例。

  console.log('1');
    setTimeout(function() {
    
    
      console.log('2');
    }, 0);
    Promise.resolve().then(function() {
    
    
      console.log('3');
    }).then(function() {
    
    
      console.log('4');
    });
    console.log('5');
    //输出结果：
    1
    5
    3
    4
    2

原因是Promise中的then方法的函数会被推入 microtasks 队列，而setTimeout的任务会被推入 macrotasks 队列。在每一次事件循环中，macrotask 只会提取一个执行，而 microtask 会一直提取，直到 microtasks 队列清空。结论如下：

microtask会优先macrotask执行
microtasks会被循环提取到执行引擎主线程的执行栈，直到microtasks任务队列清空，才会执行macrotask
【注：一般情况下，macrotask queues 我们会直接称为 task queues，只有 microtask queues 才会特别指明。】

原作者：星辰大海__xcdh
转载出处：简单理解vue中的 nextTick