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

資訊專欄INFORMATION COLUMN

我理解的關(guān)于Vue.nextTick()的正確使用

CHENGKANG / 1543人閱讀

摘要：在數(shù)據(jù)變化后要執(zhí)行的某個(gè)操作，而這個(gè)操作需要使用隨數(shù)據(jù)改變而改變的結(jié)構(gòu)的時(shí)候，這個(gè)操作都應(yīng)該放進(jìn)的回調(diào)函數(shù)中。這樣回調(diào)函數(shù)在更新完成后就會(huì)調(diào)用。

關(guān)于作者 
程序開(kāi)發(fā)人員，不拘泥于語(yǔ)言與技術(shù)，目前主要從事PHP和前端開(kāi)發(fā)，使用Laravel和VueJs，App端使用Apicloud混合式開(kāi)發(fā)。合適和夠用是最完美的追求。


個(gè)人網(wǎng)站：http://www.linganmin.cn


最近剛寫了一個(gè)手機(jī)在線播放的H5電影站：http://www.ifilm.ltd
什么是Vue.nextTick()

官方文檔解釋如下：

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

我理解的官方文檔的這句話的側(cè)重點(diǎn)在最后那半句獲取更新后的DOM，獲取更新后的DOM言外之意就是什么操作需要用到了更新后的DOM而不能使用之前的DOM或者使用更新前的DOM或出問(wèn)題，所以就衍生出了這個(gè)獲取更新后的DOM的Vue方法。所以放在Vue.nextTick()回調(diào)函數(shù)中的執(zhí)行的應(yīng)該是會(huì)對(duì)DOM進(jìn)行操作的 js代碼，比如Swiper擴(kuò)展包的

var swiper = new Swiper(".swiper-container", {
                    pagination: ".swiper-pagination",
                    nextButton: ".swiper-button-next",
                    prevButton: ".swiper-button-prev",
                    paginationClickable: true,
                    spaceBetween: 30,
                    centeredSlides: true,
                    autoplay: 2500,
                    autoplayDisableOnInteraction: false
                });
什么時(shí)候需要用的Vue.nextTick()

你在Vue生命周期的created()鉤子函數(shù)進(jìn)行的DOM操作一定要放在Vue.nextTick()的回調(diào)函數(shù)中。原因是什么呢，原因是在created()鉤子函數(shù)執(zhí)行的時(shí)候DOM 其實(shí)并未進(jìn)行任何渲染，而此時(shí)進(jìn)行DOM操作無(wú)異于徒勞，所以此處一定要將DOM操作的js代碼放進(jìn)Vue.nextTick()的回調(diào)函數(shù)中。與之對(duì)應(yīng)的就是mounted鉤子函數(shù)，因?yàn)樵撱^子函數(shù)執(zhí)行時(shí)所有的DOM掛載和渲染都已完成，此時(shí)在該鉤子函數(shù)中進(jìn)行任何DOM操作都不會(huì)有問(wèn)題 。

在數(shù)據(jù)變化后要執(zhí)行的某個(gè)操作，而這個(gè)操作需要使用隨數(shù)據(jù)改變而改變的DOM結(jié)構(gòu)的時(shí)候，這個(gè)操作都應(yīng)該放進(jìn)Vue.nextTick()的回調(diào)函數(shù)中。

原因是，Vue是異步執(zhí)行dom更新的，一旦觀察到數(shù)據(jù)變化，Vue就會(huì)開(kāi)啟一個(gè)隊(duì)列，然后把在同一個(gè)事件循環(huán) (event loop) 當(dāng)中觀察到數(shù)據(jù)變化的 watcher 推送進(jìn)這個(gè)隊(duì)列。如果這個(gè)watcher被觸發(fā)多次，只會(huì)被推送到隊(duì)列一次。這種緩沖行為可以有效的去掉重復(fù)數(shù)據(jù)造成的不必要的計(jì)算和DOm操作。而在下一個(gè)事件循環(huán)時(shí)，Vue會(huì)清空隊(duì)列，并進(jìn)行必要的DOM更新。
當(dāng)你設(shè)置 vm.someData = "new value"，DOM 并不會(huì)馬上更新，而是在異步隊(duì)列被清除，也就是下一個(gè)事件循環(huán)開(kāi)始時(shí)執(zhí)行更新時(shí)才會(huì)進(jìn)行必要的DOM更新。如果此時(shí)你想要根據(jù)更新的 DOM 狀態(tài)去做某些事情，就會(huì)出現(xiàn)問(wèn)題。。為了在數(shù)據(jù)變化之后等待 Vue 完成更新 DOM ，可以在數(shù)據(jù)變化之后立即使用 Vue.nextTick(callback) 。這樣回調(diào)函數(shù)在 DOM 更新完成后就會(huì)調(diào)用。

安小下同學(xué)

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

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

相關(guān)文章

  • 我理解的關(guān)于Vue.nextTick()的正確使用

    摘要：在數(shù)據(jù)變化后要執(zhí)行的某個(gè)操作，而這個(gè)操作需要使用隨數(shù)據(jù)改變而改變的結(jié)構(gòu)的時(shí)候，這個(gè)操作都應(yīng)該放進(jìn)的回調(diào)函數(shù)中。這樣回調(diào)函數(shù)在更新完成后就會(huì)調(diào)用。 關(guān)于作者 程序開(kāi)發(fā)人員，不拘泥于語(yǔ)言與技術(shù)，目前主要從事PHP和前端開(kāi)發(fā)，使用Laravel和VueJs，App端使用Apicloud混合式開(kāi)發(fā)。合適和夠用是最完美的追求。 個(gè)人網(wǎng)站：http://www.linganmin.cn 最近剛寫...

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

  • 詳細(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)，咋就在這里面寫就是dom更新之后，當(dāng)時(shí)連什么macrotask、micro...

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

  • 【Vue原理】NextTick - 源碼版 之 獨(dú)立自身

    摘要：盡量把所有異步代碼放在一個(gè)宏微任務(wù)中，減少消耗加快異步代碼的執(zhí)行。我們知道，如果一個(gè)異步代碼就注冊(cè)一個(gè)宏微任務(wù)的話，那么執(zhí)行完全部異步代碼肯定慢很多避免頻繁地更新。中就算我們一次性修改多次數(shù)據(jù)，頁(yè)面還是只會(huì)更新一次。 寫文章不容易，點(diǎn)個(gè)贊唄兄弟專注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內(nèi)部詳情，讓我們一起學(xué)習(xí)吧研究基于 Vue版本 【2.5...

    劉東 評(píng)論0 收藏0

  • Vue.nextTick 的原理和用途

    摘要：在查詢了各種資料后，總結(jié)了一下其原理和用途，如有錯(cuò)誤，請(qǐng)不吝賜教。截取關(guān)鍵部分如下具體來(lái)說(shuō)，異步執(zhí)行的運(yùn)行機(jī)制如下。知乎上的例子改變數(shù)據(jù)想要立即使用更新后的。需要注意的是，在和階段，如果需要操作渲染后的試圖，也要使用方法。 對(duì)于 Vue.nextTick 方法，自己有些疑惑。在查詢了各種資料后，總結(jié)了一下其原理和用途，如有錯(cuò)誤，請(qǐng)不吝賜教。 概覽 官方文檔說(shuō)明： 用法： 在下次 DO...

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

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

0條評(píng)論

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