如何理解$nextTick

vue是响应式的框架：状态的变化能自动更新视图。不过，这个过程是异步的。nextTick就是用来实现这个异步过程的核心函数。

有两种情况会调用nextTick：

1. 情况1是当状态被修改，vue会自动调用nextTick，并传入这个状态的观察者-watcher。简化记为：nextTick(watcher函数)。
2. 情况2是我们手动调用nextTick（用Vue.nextTick，或者是this.$nextTick），并传入自己的回调函数。简化记为：nextTick(callback函数）

那么nextTick内部做了什么呢？ 主要是两件事：

1. 将实参push到其内部维护的callbacks数组中
2. 用Promise.resolve().then 注册微任务（这里简化场景：以支持Promise的浏览器环境为例，就不考虑其他），执行callbacks中的所有回调。

请注意上面的push。也正因为push，所以nextTick的回调能：

在下次 DOM 更新循环结束之后执行延迟回调。参见: vue2官网

它的应用场景是：需要在本轮视图更新结束之后做什么事，就将这事放在nextTick中。例如：

1. 向列表数据中添加后，想获取列表容器的新高度； 伪代码如下：

this.list.push(新数据)
this.$nextTick(()=>{ 
   // list容器的新高度
})

2. 父组件的状态通过props传递给子组件使用时，当父组件的状态改动后，想通过子组件的实例获取内部的props。伪代码如下：

this.data1 = 新值
this.$nextTick(()=>{
    this.$refs.子组件.prop1 // 子组件的prop的新值
})

其他资料：这里有7道题，能进一步帮你加深理解