nexttick的作用和应用场景

男娘i 2024-03-26 13:35 21阅读 0赞

## JS运行机制 ##

> JS 执⾏是单线程的， 它是基于事件循环的。 事件循环⼤致分为以下⼏个步骤：  
> （1） 所有同步任务都在主线程上执⾏， 形成⼀个执⾏栈（execution context stack） 。  
> （2） 主线程之外， 还存在⼀个"任务队列"（task queue） 。 只要异步任务有了运⾏结果， 就在"任务队  
> 列"之中放置⼀个事件。  
> （3） ⼀旦"执⾏栈"中的所有同步任务执⾏完毕， 系统就会读取"任务队列"， 看看⾥⾯有哪些事件。 那  
> 些对应的异步任务， 于是结束等待状态， 进⼊执⾏栈， 开始执⾏。  
> （4） 主线程不断重复上⾯的第三步。  
> ————————————————  
> 原文链接：https://blog.csdn.net/longtengg1/article/details/115576081

## nextTick ##

最近的一次DOM更新结束之后的回调，异步执行。

原理：

1.把你设置的回调放在 参数为0的setTimeout 中执行，这样就算异步了，等待当时同步代码执行完毕再执行。

2.Vue 不止使用 setTimeout 实现nextTick；会判断promise是否存在，选择任务类型。如果promise存在，就使用微任务。

### 作用 ###

1.  Vue是异步渲染的框架。
2.  data改变之后，DOM不会立刻渲染。
3.  $nextTick会在DOM渲染之后被触发，以获取最新的DOM节点。
4.  连续多次的异步渲染，$nextTick只会执行最后一次渲染后的结果。避免不必要的计算和DOM操作。

## 场景 ##

1.有时需要根据数据动态的为页面某些dom元素添加事件，这就要求在dom元素渲染完毕时去设置，但是created与mounted函数执行时一般dom并没有渲染完毕，所以就会出现获取不到，添加不了事件的问题，这回就要用到nextTick处理

2.在使用某个第三方插件时 ，希望在vue生成的某些dom动态发生变化时重新应用该插件，也会用到该方法，这时候就需要在 $nextTick 的回调函数中执行重新应用插件的方法，例如:应用滚动插件better-scroll时

3.数据改变后获取焦点

## 补充 ##