JavaScript Event Loop机制详解与Vue.js中nextTick的实践应用

() {

console.log("End of next queue");

}, 0);

}

foo();

// 输出

Start of queue

End of queue

Promise resolved

Promise resolved again

Start of next queue

End of next queue

Middle of queue

上述代码中首个 TaskQueue 即为 foo()，foo() 又调用了 bar() 构建了新的 TaskQueue，bar() 调用之后 foo() 又产生了 MicroTask 并被压入了独一的 MicroTask 队列。我们最后再总计下 JavaScript MacroTask 与 MicroTask 的履行次序，当履行栈(call stack)为空的时刻，开端依次履行：

《这一段在我标记里也放了良久，无法肯定是否拷贝的。。。如不雅有哪位发明请及时告诉。。。(*ฅ́˘ฅ̀*)♡》

3）将 currently running task 设置为 task A

1）把最早的义务(task A)放入义务队列

2）如不雅 task A 为null (那义务队列就是空)，直接跳到第6步

4）履行 task A (也就是履行回调函数)

5）将 currently running task 设置为 null 并移出 task A

6）履行 microtask 队列a: 在 microtask 中选出最早的义务 task X

c: 将 currently running task 设置为 task X

b: 如不雅 task X 为null (那 microtask 队列就是空)，直接跳到 g

d: 履行 task X

f: 在 microtask 中选出最早的义务 , 跳到 b

g: 停止 microtask 队列

5. 延长浏览

深刻浅出 Node.js 全栈架构 – Node.js 事宜轮回机制详解与实践

1）跳到第一步

在 Vue.js 中，其会异步履行 DOM 更新;当不雅察到数据变更时，Vue 将开启一个队列，并缓冲在同一事宜轮回中产生的所稀有据改变。如不雅同一个 watcher 被多次触发，只会一次推入到队列中。这种在缓冲时去除反复数据对于避免不须要的计算和 DOM 操作上异常重要。然后，鄙人一?的事宜轮回“tick”中，Vue 刷新队列并履行实际(已去重的)工作。Vue 在内部测验测验对异部队列应用原生的 Promise.then 和 MutationObserver，如不雅履行情况不支撑，会采取 setTimeout(fn, 0) 代替。

《因为本人掉误，本来此处内容拷贝了 https://www.zhihu.com/question/55364497 这个答复，造成了侵权，深表歉意，已江山除，后续我会在 github 链接上重写本段》

而当我们欲望在数据更新之后履行某些 DOM 操作，就须要应用 nextTick 函数来添加回调：

// HTML 
 
<div id="example">{{message}}</div> 
 
  
 
// JS 
 
var vm = new Vue({ 
 
  el: '#example', 
 
  data: { 
 
    message: '123' 
 
  } 
 
	
			 5/9   首页 上一页 3 4 5 6 7 8 下一页 尾页	
			

　　推荐阅读
　　借力大数据技术 证券行业迎转型契机
            51CTO诚邀您9月23号和秒拍/国美/美团元专家一路聊智能CDN的优化之路，抓紧时光哦！
            互联网+时代，证券行业制订大年夜数据计谋急切而合时。一方面，近年来大年夜数据被晋升到国度成长计谋层>>>详细阅读


本文标题：JavaScript Event Loop机制详解与Vue.js中nextTick的实践应用
地址：http://www.17bianji.com/lsqh/37333.html
 1/2    1