Vue（五 nextTick）

官方定义：在下次DOM更新循环结束后执行延迟回调，在修改数据之后立刻使用这个方法，获取更新后的DOM

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

解读：Vue在更新DOM时是异步执行的（ $\color{blue}{其他框架、js等更新DOM是否是异步的？}$ ），当数据发生变化，vue会开启一个异步更新队列，师徒需要等待队列中所有数据变化完成之后再统一进行更新，一个例子

<div id="app"> {{ message }} </div>

const vm = new Vue({
  el: '#app',
  data: {
    message: 'current'
  },
  changeData(){
    this.message = 'change1'
    this.message = 'change2'
    this.message = 'change3'
    console.log(vm.$el.textContent) // current
  }
})

这是因为message变化时， vue不会立刻更新DOM，而是将修改数据的操作放在一个异步操作队列中，如果一直修改相同的数据，异步操作还会去重。
等待同一事件循环中的所有数据变化完成占比后，会将队列中的事件拿来进行处理，进行DOM的更新

上述例子以及下面场景举例中的两个例子，出现问题的情况都是，在给data赋值时候立马去查看了数据导致的。“查看数据”这个动作是同步操作，并且都是在赋值之后，因此，我们猜测，并且结合官网，我们发现，给数据赋值操作是一个异步操作，并没有马上执行，

为什么要有nexttick机制
防止每次改变值的时候，都会触发试图更新，所以他本质是一种优化策略。
$\color{red}{当视图真的更新之后，才去进行一些操作，也就是说，nextTick}$
$\color{red}{中的第一个参数，是作为DOM更新之后的回调函数来执行的，}$
$\color{red}{DOM什么时候做更新？我们暂时不太清楚，但是这个更新时间}$
$\color{red}{应该是不为我们所感知到的，也就是说，不用担心，改变值之后}$
$\color{red}{好几秒都不更新DOM，这个更新的时间应该是很短的，当他}$
$\color{red}{更新完之后，再去执行取值或者是其他的操作就没有问题了}$

使用场景
想要在修改数据后立刻得到更新后的DOM结构，可以使用Vue.nextTick。第一个参数是回调函数，第二个参数是执行函数上下文

// 修改数据
vm.message = '修改后的值'
// DOM 还没有更新
console.log(vm.$el.textContent) // 原始的值
Vue.nextTick(function () { // 组件内使用this.$nextTick()，回调函数中的this将自动绑定到当前vue实例上
  // DOM 更新了
  console.log(vm.$el.textContent) // 修改后的值
})

场景举例
1、文字的行数来显示展开更多的一个按钮，在Vue中给数据赋值之后需要获取文字高度：

<div id="app">
    <div class="msg">
        {{msg}}
    </div>
</div>
new Vue({
    el: '#app',
    data: function(){
        return {
            msg: ''
        }
    },
    mounted(){
        this.msg = '我是测试文字'
        console.log(document.querySelector('.msg').offsetHeight) //0
    }
})

2、父子组件传参：给子组件传参数后，在子组件中调用函数查看参数

<div id="app">
    <div class="msg">
        <form-report ref="child" :name="childName"></form-report>
    </div>
</div>
Vue.component('form-report', {
    props: ['name'],
    methods: {
        showName(){
            console.log('子组件name：'+this.name)
        }
    },
    template: '<div>{{name}}</div>'
})
new Vue({
    el: '#app',
    data: function(){
        return {
            childName: '',
        }
    },
    mounted(){
        this.childName = '我是子组件名字'
        this.$refs.child.showName()
    }
})

返回值
$nextTick返回的是一个Promise对象，可以用async/await

this.message = '修改后的值'
console.log(this.$el.textContent) // => '原始的值'
await this.$nextTick()
console.log(this.$el.textContent) // => '修改后的值'

实现原理

其他解读
引自：https://juejin.cn/post/6844903906858795015
js的运行机制
js的执行是单线程，基于事件循环（event loop），事件循环大致分为以下几个步骤：
1、所有的任务都会被放到调用栈（call-stack）等待主线程（main thread）执行,主线程的执行过程就是一个 tick。
2、JS调用栈采用的是后进先出的规则，当函数执行的时候，会被添加到栈的顶部，当执行栈执行完成后，就会从栈顶移出，直到栈内被清空。
3、同步任务会在调用栈中按照顺序等待主线程依次执行，异步任务会在异步任务有了结果后，将注册的回调函数放入任务队列中等待主线程空闲的时候（调用栈被清空），被读取到栈内等待主线程的执行。
4、任务队列（Task Queue）是一种先进先出的数据结构

有一个问题，“主线程的执行过程就是一个 tick”这句话的意思，是不是说，主线程每执行一个任务，就是一个tick，就会触发dom更新？？？如果这样的话，连续赋值，只会取最后一个赋的值这个是什么机制呢，是不是每次tick内会检查对一个变量的重复赋值，然后取最后一个

Vue（五 nextTick）

推荐阅读更多精彩内容