[Vue] $nextTick()的理解和使用

先把我使用$nextTick()最多的场景放这里：

如果你在写js/ts时要在更改完数据后，去操作DOM，那这个时候就要把操作DOM的代码放到$nextTick()中。否则，会看到，调试的数据都是对的，但是页面的行为怎么就是错的。

直接查看Vue API文档（https://vuejs.org/v2/api/#Vue-nextTick），看其对$nextTick()的定义:

image.png

这个定义的直接翻译是：
“将回调延迟到下一个DOM更新周期之后执行。在更改了一些数据以等待DOM更新之后立即使用它”。

作为从后端转到前端的开发，对前端的底层知识还没深刻的理解，第一次看到这句定义真的是摸不着头脑：

什么是DOM更新周期？
为什么要延迟到‘下一个’DOM更新周期？
为什么说是“下一个”？
为什么要在更改了一些数据以等待DOM更新之后立即使用它？
什么叫“以等待DOM更新之后“？
总之是我看过最拗口的定义，无数个疑问都不知道从哪个开始突破。

那么现在是我第3次使用$nextTick()，也是觉得理解对了$nextTick()的用法和目的，分享出来。

开始:
对于 $nextTick()的解释，Vue的官方文档放的比较零散，但是如果等通读完文档再着手开发项目又不现实。所以我抠出了截图，我画出了重点，但建议你通读截图里的文字，这样有助于整体理解：
其实$nextTick() API文档下有个链接用于解释“Vue的异步更新队列”，理解了这个就差不多理解了何时该用$nextTick() 。

https://vuejs.org/v2/api/#Vue-nextTick

https://vuejs.org/v2/guide/reactivity.html#Async-Update-Queue

翻译过来是：Vue异步执行DOM更新。每当观察到数据更改时，它将打开一个队列并缓冲同一事件循环中发生的所有数据更改。如果同一个监视程序被触发多次，那么它将只被推入队列一次。这种缓冲的重复数据删除对于避免不必要的计算和DOM操作非常重要。然后，在下一个事件循环“tick”中，Vue刷新队列并执行实际的(已经被清除的)工作。在内部Vue尝试原生承诺。然后，对异步队列使用MutationObserver和setimmediation，并退回到setTimeout(fn, 0)。

这就解释了前面的3个问题：

什么是DOM更新周期？
为什么要延迟到‘下一个’DOM更新周期？
为什么说是“下一个”？

对于一个事件的数据，从“数据更改”->"缓存入数据更新队列"->在某个条件下，将这个缓存数据被更新到DOM（页面出现更新）->这个事件再监听数据更改。这是一个周期。也就是说，你改了数据，虽然Vue是响应式的更新，有些时候你看起来好像是立刻更新了，但其实不是，Vue把改动的数据先缓存起来了，要等下一个DOM更新周期到了才会把这些数据更新到DOM里，因此，如果说你只是“看”页面，看不出区别。如果你要在更新完数据后，去操作DOM，那这个时候就会看到，调试的数据都是对的，但是页面的行为怎么就是错的。这就是我的使用场景。

下面是一个应用举例，括号里为测试数据。如果不想看，跳过直接看总结
这里，我要做到这样的功能，删除当前的filter(branch-test)后，页面要显示默认的filter(test4).
页面的数据结构是这样的：

myFilters:[]any=>所有的filter信息
activeFilter:any=>当前被选中的filter
filter是Button, 点击后颜色变化是通过getElementById()操作DOM 来实现的，正是因为这个，才需要用到$nextTick()

image.png

在下面代码中，最后一个方法onFilterDelete 是实现这个功能的入口；
我说下没有使用nextTick()看到的乱象，这样你就能理解为什么要用nextTick():
最开始没用$nextTick()，看到的乱象是：当我删除了branch-test 这个filter后，橙色的字眼跳到了fontana，而下面表格里罗列的却是test4(default)的job, 也就是说，操作DOM得到的结果是错的，而table数据是对的，说明数据没有问题(当我在方法里打印出操作DOM的时候，它操作的ID也是对的）但是这里有我还没想明白的疑问是，既然getElementById（"test4"）那此时旧的DOM里也有这个test4对象，为什么会渲染到fontana呢？知道的朋友也回复下

总结下：也就是说，如果你要在数据更改了之后，下一步是，需要手动（自己写代码）去更改DOM的内容（我把这个工作叫善后代码段），那么，修改完数据后，善后代码段包成一个方法，并把它放入

this.$nextTick(() => {
this.善后方法();
})

而且这3行代码是跟在你修改数据的代码后，像这样，改完数据后要去修改DOM样式：

        this.myFilters.splice(index, 1); //改数据
        console.log('After delete filter', this.myFilters)
        this.$nextTick(() => {      
            this.setDefaultFilter()  //修改DOM样式
        })

以下是ts代码:

    setDefaultFilter() {
        let defaultFilter = this.myFilters.find(f => f.isDefault);
        if (isEmpty(defaultFilter)) {
            defaultFilter = this.myFilters.find(f => f.name === 'All Jobs');
        }
        this.activeFilter = defaultFilter 
        console.log('[DEBUG] set color to orange for ', filter.name);
          // @ts-ignore
        document.getElementById(filter.name).style.color = "#e87532e0";
        for (let f of this.myFilters) {
            if (f.name !== filter.name) {
                // @ts-ignore
                document.getElementById(f.name).style.color = "dodgerblue"
            }
        }
//...
    }
    
 async onFilterDelete() {
       //...
        let res = await service.deleteFilter(this.activeFilter.id).toPromise();
        if (res.code !== 200) {
            errorHandler.handle("Fail to delete Filter: " + this.activeFilter.name)
            return;
        }
        let deleteFilterId = this.activeFilter.id;
        let index = findIndex(this.myFilters, function (o) {
            return ('id' in o) && o.id === deleteFilterId;
        });
        this.myFilters.splice(index, 1);
        console.log('After delete filter', this.myFilters)
        this.$nextTick(() => {      //重点代码
            this.setDefaultFilter()  //重点代码
        })
    }