成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

關(guān)于vue中next和Tick(nextTick)的一點(diǎn)理解

mgckid / 1898人閱讀

摘要：為什么叫按照官網(wǎng)的解釋在下次更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)。在修改數(shù)據(jù)之后立即使用這個(gè)方法，獲取更新后的。在下個(gè)事件循環(huán)執(zhí)行時(shí)確實(shí)是最新的了，但是回調(diào)并沒(méi)有在下個(gè)事件循環(huán)執(zhí)行。

前言

在這之前我是沒(méi)有怎么看過(guò)vue源碼的，但是看了源碼后又產(chǎn)生了一些疑問(wèn)，如果不看源碼我還真沒(méi)有任何疑問(wèn)的去用nextTick，因?yàn)槲抑恢牢蚁氆@取更新后的dom我就在里面寫(xiě)回調(diào)，只管寫(xiě)準(zhǔn)沒(méi)錯(cuò)，有天好奇調(diào)試了下代碼就發(fā)現(xiàn)了一些疑問(wèn)....

什么時(shí)候開(kāi)始本次Tick?

百度搜索event loops可以看到很多文章，但是看了很多文章都沒(méi)讓我知道或者作者沒(méi)有去說(shuō)明什么時(shí)候開(kāi)始第一次tick,不過(guò)也幸運(yùn)，還是有人skycity明確說(shuō)出了，印象中之前掘金有篇文章我在評(píng)論里面也得到過(guò)答案，答案就是從全局script開(kāi)始執(zhí)行開(kāi)始第一輪tick

什么時(shí)候結(jié)束本次Tick?

這個(gè)也是我根據(jù)搜索資料得出結(jié)論，當(dāng)GUI 渲染完后本輪Tick結(jié)束，但是在開(kāi)始渲染之前js 引擎會(huì)執(zhí)行完所有的微任務(wù)隊(duì)列，新的叫法是jobs,宏任務(wù)叫tasks

一次tick結(jié)束之后干嘛？

繼續(xù)查找事件任務(wù)隊(duì)列中是否有tasks，如果沒(méi)有就靜靜等待非空，如果有就繼續(xù)開(kāi)始第二輪tick，取出tasks執(zhí)行
我畫(huà)了個(gè)圖可以表示下這個(gè)過(guò)程

這個(gè)結(jié)論是我目前覺(jué)得正確的，希望有覺(jué)得不對(duì)的地方可以評(píng)論討論下。

為什么叫next**?

按照官網(wǎng)的解釋

在下次 DOM 更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)。在修改數(shù)據(jù)之后立即使用這個(gè)方法，獲取更新后的 DOM。

我個(gè)人是并不理解這個(gè)下次dom更新循環(huán)是指的什么?是跟event loop這個(gè)事件循環(huán)一個(gè)意思嗎？本次dom更新循環(huán)是什么時(shí)候開(kāi)始?什么時(shí)候結(jié)束？希望有人知道的解釋下。我覺(jué)得執(zhí)行回調(diào)的時(shí)機(jī)是在下個(gè)tick之前執(zhí)行的，

2018.7.21更新：根絕SHERlocked93大佬的文章參考以及他的回答，nextTick的回調(diào)執(zhí)行時(shí)機(jī)其實(shí)是不確定的，看下面這個(gè)圖：

根據(jù)上面的圖可以看到最終回調(diào)有可能放入兩個(gè)隊(duì)列，那被執(zhí)行的時(shí)機(jī)就有一下可能：
1：放入微任務(wù)隊(duì)列,則在本輪tick執(zhí)行
2：放入宏任務(wù)隊(duì)列，則在下輪tick或者下下輪，或者下n輪
第二種為什么不確定呢？因?yàn)椴恢婪湃腙?duì)列時(shí)前面有幾個(gè)任務(wù)在排隊(duì)，可能以后n個(gè)計(jì)時(shí)器，而宏任務(wù)不像微任務(wù)一次全部執(zhí)行完，宏任務(wù)是一個(gè)tick只執(zhí)行一個(gè)任務(wù)，每個(gè)任務(wù)都在不同的tick,所以時(shí)機(jī)不定，但是肯定是在本輪tick之后

下面的代碼我只走了支持Promsie的瀏覽器的過(guò)程，此時(shí)是在本輪tick執(zhí)行
假設(shè)html中有這行代碼

{{msg}}
我們?cè)趍ounted里面執(zhí)行

this.msg = "hello";
this.$nextTick(()=>{
    console.log(this.$refs.msg.innerHTML)
})

上述代碼在vue里面的大致如下執(zhí)行流程如下

通過(guò)上面的流程分析，nextTick里面的回調(diào)是在當(dāng)前時(shí)間循環(huán)內(nèi)執(zhí)行的，并沒(méi)有在下個(gè)事件循環(huán)執(zhí)行。so,在下個(gè)事件循環(huán)執(zhí)行時(shí)dom確實(shí)是最新的了，但是回調(diào)并沒(méi)有在下個(gè)事件循環(huán)執(zhí)行。

總結(jié)

1.nextTick里面的回調(diào)是在本輪tick循環(huán)中執(zhí)行的 nextTick里面的回調(diào)是在本輪tick或者下n輪tick中執(zhí)行的(n=1,2,3...)
2.所有的微任務(wù)會(huì)在本輪tick中全部執(zhí)行完
3.任何一個(gè)宏任務(wù)也就是tasks都不在一個(gè)tick中執(zhí)行，而是在不同的tick

參考鏈接：

理解javascript中的事件循環(huán)(EventLoop)

Javascript事件循環(huán)機(jī)制以及渲染引擎何時(shí)渲染UI

從瀏覽器多進(jìn)程到JS單線程，JS運(yùn)行機(jī)制最全面的一次梳理

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/96119.html

相關(guān)文章

  • 詳細(xì)分析Vue.nextTick()實(shí)現(xiàn)

    摘要：因?yàn)槠綍r(shí)使用都是傳回調(diào)的，所以很好奇什么情況下會(huì)為，去翻看官方文檔發(fā)現(xiàn)起新增如果沒(méi)有提供回調(diào)且在支持的環(huán)境中，則返回一個(gè)。這就對(duì)了，函數(shù)體內(nèi)最后的判斷很明顯就是這個(gè)意思沒(méi)有回調(diào)支持。 Firstly, this paper is based on Vue 2.6.8剛開(kāi)始接觸Vue的時(shí)候，哇nextTick好強(qiáng)，咋就在這里面寫(xiě)就是dom更新之后，當(dāng)時(shí)連什么macrotask、micro...

    DevYK 評(píng)論0 收藏0

  • 【Vue源碼】Vue中DOM的異步更新策略以及nextTick機(jī)制

    摘要：本篇文章主要是對(duì)中的異步更新策略和機(jī)制的解析，需要讀者有一定的使用經(jīng)驗(yàn)并且熟悉掌握事件循環(huán)模型。這個(gè)結(jié)果足以說(shuō)明中的更新并非同步。二是把回調(diào)函數(shù)放入一個(gè)隊(duì)列，等待適當(dāng)?shù)臅r(shí)機(jī)執(zhí)行。通過(guò)的主動(dòng)來(lái)觸發(fā)的事件，進(jìn)而把回調(diào)函數(shù)作為參與事件循環(huán)。 本篇文章主要是對(duì)Vue中的DOM異步更新策略和nextTick機(jī)制的解析，需要讀者有一定的Vue使用經(jīng)驗(yàn)并且熟悉掌握J(rèn)avaScript事件循環(huán)模型。 ...

    selfimpr 評(píng)論0 收藏0

  • 從Vue.js源碼看異步更新DOM策略及nextTick

    摘要：我們發(fā)現(xiàn)默認(rèn)是使用異步執(zhí)行更新。優(yōu)先使用，在不存在的情況下使用，這兩個(gè)方法的回調(diào)函數(shù)都會(huì)在中執(zhí)行，它們會(huì)比更早執(zhí)行，所以優(yōu)先使用。是最后的一種備選方案，它會(huì)將回調(diào)函數(shù)加入中，等到執(zhí)行。 寫(xiě)在前面 因?yàn)閷?duì)Vue.js很感興趣，而且平時(shí)工作的技術(shù)棧也是Vue.js，這幾個(gè)月花了些時(shí)間研究學(xué)習(xí)了一下Vue.js源碼，并做了總結(jié)與輸出。文章的原地址：https://github.com/ans...

    leo108 評(píng)論0 收藏0

  • Vue nextTick 機(jī)制

    摘要：而和的延遲明顯是小于的。因?yàn)榈氖录C(jī)制是通過(guò)事件隊(duì)列來(lái)調(diào)度執(zhí)行，會(huì)等主進(jìn)程執(zhí)行空閑后進(jìn)行調(diào)度，所以先回去等待所有的進(jìn)程執(zhí)行完成之后再去一次更新。因?yàn)槭紫扔|發(fā)了，導(dǎo)致觸發(fā)了的，從而將更新操作進(jìn)入的事件隊(duì)列。這種情況會(huì)導(dǎo)致順序成為了。 背景 我們先來(lái)看一段Vue的執(zhí)行代碼： export default { data () { return { msg: 0 ...

    Rindia 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<