海东商城网站建设,做seo推广手机网站,网站搭建中企动力第一,在线代理 翻墙nextTick 在vue 源码中是利用 Promise.resolve()实现的。该问题实际就是Promise与setTimeout的区别#xff0c;本质是Event Loop中微任务与宏任务的区别。
nextTick:在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法#xff0c;获取更新后的 DOM。…nextTick 在vue 源码中是利用 Promise.resolve()实现的。该问题实际就是Promise与setTimeout的区别本质是Event Loop中微任务与宏任务的区别。
nextTick:在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法获取更新后的 DOM。
简单点说就是 DOM更新后会执行的一个回调方法 setTimeout只是延迟执行在延迟执行的方法里DOM有可能会更新也有可能没有更新。 常规做法就是延迟500ms或者1s
$nextTick一般使用在DOM操作上的Vue在更新data之后并不会立即更新DOM上的数据就是说**如果我们修改了data中的数据再马上获取DOM上的值我们取得的是旧值**。官网的原话是在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法获取更新后的 DOM。我们把获取DOM上值的操作放进$nextTick里就可以得到更新后得数据。
setTimeout就是个延时回调和DOM操作无关。
建议使用nextTick在有涉及DOM更新的场景
JS中的Event Loop 我们都明白javascript是单线程的所有的任务都会在主线程中执行的当主线程中的任务都执行完成之后系统会 “依次” 读取任务队列里面的事件因此对应的异步任务进入主线程开始执行。
但是异步任务队列又分为: macrotasks(宏任务) 和 microtasks(微任务)。 他们两者分别有如下API:
macrotasks(宏任务): setTimeout、setInterval、setImmediate、I/O、UI rendering 等。 microtasks(微任务): Promise、process.nextTick、MutationObserver 等。 promise的then方法的函数会被推入到 microtasks(微任务) 队列中(Promise本身代码是同步执行的)而setTimeout函数会被推入到 macrotasks(宏任务) 任务队列中在每一次事件循环中 macrotasks(宏任务) 只会提取一个执行而 microtasks(微任务) 会一直提取直到 microtasks(微任务)队列为空为止。
也就是说如果某个 microtasks(微任务) 被推入到执行中那么当主线程任务执行完成后会循环调用该队列任务中的下一个任务来执行直到该任务队列到最后一个任务为止。而事件循环每次只会入栈一个 macrotasks(宏任务), 主线程执行完成该任务后又会循环检查 microtasks(微任务) 队列是否还有未执行的直到所有的执行完成后再执行 macrotasks(宏任务)。 依次循环直到所有的异步任务完成为止。
现在我们来看一个简单的例子分析一下 console.log(1);setTimeout(function(){console.log(2);}, 0);new Promise(function(resolve) {console.log(3);for (var i 0; i 100; i) {i 99 resolve();}console.log(4);}).then(function() {console.log(5);});console.log(6);打印结果再试试这个复杂点的例子console.log(1);setTimeout(function(){console.log(2);}, 10);new Promise(function(resolve) {console.log(3);for (var i 0; i 10000; i) {i 9999 resolve();}console.log(4);}).then(function() {console.log(5);});setTimeout(function(){console.log(7);},1);new Promise(function(resolve) {console.log(8);resolve();}).then(function(){console.log(9);});console.log(6); 值得一提的是微任务执行完成后就执行第二个宏任务setTimeout由于第一个setTimeout是10毫秒后执行第二个setTimeout是1毫秒后执行因此1毫秒的优先级大于10毫秒的优先级因此最后分别打印 7, 2 了
而很多人会发现vue中的nextTick会比setTimeout优先级高就是因为nextTick是以微任务Promise.then优先的。
Vue的特点之一就是能实现响应式但数据更新时DOM不会立即更新而是放入一个异步队列中因此如果在我们的业务场景中有一段代码里面的逻辑需要在DOM更新之后才能顺利执行这个时候我们可以使用this.$nextTick() 函数来实现。
