先把我使用$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() //重点代码
})
}
网友评论