摘要:在數(shù)據(jù)變化后要執(zhí)行的某個操作,而這個操作需要使用隨數(shù)據(jù)改變而改變的結(jié)構(gòu)的時候,這個操作都應該放進的回調(diào)函數(shù)中。這樣回調(diào)函數(shù)在更新完成后就會調(diào)用。
關(guān)于作者
什么是Vue.nextTick()程序開發(fā)人員,不拘泥于語言與技術(shù),目前主要從事PHP和前端開發(fā),使用Laravel和VueJs,App端使用Apicloud混合式開發(fā)。合適和夠用是最完美的追求。
個人網(wǎng)站:http://www.linganmin.cn
最近剛寫了一個手機在線播放的H5電影站:http://www.ifilm.ltd
官方文檔解釋如下:
在下次 DOM 更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)。在修改數(shù)據(jù)之后立即使用這個方法,獲取更新后的 DOM。
我理解的官方文檔的這句話的側(cè)重點在最后那半句獲取更新后的DOM,獲取更新后的DOM言外之意就是什么操作需要用到了更新后的DOM而不能使用之前的DOM或者使用更新前的DOM或出問題,所以就衍生出了這個獲取更新后的DOM的Vue方法。所以放在Vue.nextTick()回調(diào)函數(shù)中的執(zhí)行的應該是會對DOM進行操作的 js代碼,比如Swiper擴展包的
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 });什么時候需要用的Vue.nextTick()
你在Vue生命周期的created()鉤子函數(shù)進行的DOM操作一定要放在Vue.nextTick()的回調(diào)函數(shù)中。原因是什么呢,原因是在created()鉤子函數(shù)執(zhí)行的時候DOM 其實并未進行任何渲染,而此時進行DOM操作無異于徒勞,所以此處一定要將DOM操作的js代碼放進Vue.nextTick()的回調(diào)函數(shù)中。與之對應的就是mounted鉤子函數(shù),因為該鉤子函數(shù)執(zhí)行時所有的DOM掛載和渲染都已完成,此時在該鉤子函數(shù)中進行任何DOM操作都不會有問題 。
在數(shù)據(jù)變化后要執(zhí)行的某個操作,而這個操作需要使用隨數(shù)據(jù)改變而改變的DOM結(jié)構(gòu)的時候,這個操作都應該放進Vue.nextTick()的回調(diào)函數(shù)中。
原因是,Vue是異步執(zhí)行dom更新的,一旦觀察到數(shù)據(jù)變化,Vue就會開啟一個隊列,然后把在同一個事件循環(huán) (event loop) 當中觀察到數(shù)據(jù)變化的 watcher 推送進這個隊列。如果這個watcher被觸發(fā)多次,只會被推送到隊列一次。這種緩沖行為可以有效的去掉重復數(shù)據(jù)造成的不必要的計算和DOm操作。而在下一個事件循環(huán)時,Vue會清空隊列,并進行必要的DOM更新。
當你設置 vm.someData = "new value",DOM 并不會馬上更新,而是在異步隊列被清除,也就是下一個事件循環(huán)開始時執(zhí)行更新時才會進行必要的DOM更新。如果此時你想要根據(jù)更新的 DOM 狀態(tài)去做某些事情,就會出現(xiàn)問題。。為了在數(shù)據(jù)變化之后等待 Vue 完成更新 DOM ,可以在數(shù)據(jù)變化之后立即使用 Vue.nextTick(callback) 。這樣回調(diào)函數(shù)在 DOM 更新完成后就會調(diào)用。
安小下同學
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/50518.html
摘要:在數(shù)據(jù)變化后要執(zhí)行的某個操作,而這個操作需要使用隨數(shù)據(jù)改變而改變的結(jié)構(gòu)的時候,這個操作都應該放進的回調(diào)函數(shù)中。這樣回調(diào)函數(shù)在更新完成后就會調(diào)用。 關(guān)于作者 程序開發(fā)人員,不拘泥于語言與技術(shù),目前主要從事PHP和前端開發(fā),使用Laravel和VueJs,App端使用Apicloud混合式開發(fā)。合適和夠用是最完美的追求。 個人網(wǎng)站:http://www.linganmin.cn 最近剛寫...
摘要:因為平時使用都是傳回調(diào)的,所以很好奇什么情況下會為,去翻看官方文檔發(fā)現(xiàn)起新增如果沒有提供回調(diào)且在支持的環(huán)境中,則返回一個。這就對了,函數(shù)體內(nèi)最后的判斷很明顯就是這個意思沒有回調(diào)支持。 Firstly, this paper is based on Vue 2.6.8剛開始接觸Vue的時候,哇nextTick好強,咋就在這里面寫就是dom更新之后,當時連什么macrotask、micro...
摘要:盡量把所有異步代碼放在一個宏微任務中,減少消耗加快異步代碼的執(zhí)行。我們知道,如果一個異步代碼就注冊一個宏微任務的話,那么執(zhí)行完全部異步代碼肯定慢很多避免頻繁地更新。中就算我們一次性修改多次數(shù)據(jù),頁面還是只會更新一次。 寫文章不容易,點個贊唄兄弟專注 Vue 源碼分享,文章分為白話版和 源碼版,白話版助于理解工作原理,源碼版助于了解內(nèi)部詳情,讓我們一起學習吧研究基于 Vue版本 【2.5...
摘要:在查詢了各種資料后,總結(jié)了一下其原理和用途,如有錯誤,請不吝賜教。截取關(guān)鍵部分如下具體來說,異步執(zhí)行的運行機制如下。知乎上的例子改變數(shù)據(jù)想要立即使用更新后的。需要注意的是,在和階段,如果需要操作渲染后的試圖,也要使用方法。 對于 Vue.nextTick 方法,自己有些疑惑。在查詢了各種資料后,總結(jié)了一下其原理和用途,如有錯誤,請不吝賜教。 概覽 官方文檔說明: 用法: 在下次 DO...
閱讀 947·2021-09-26 09:55
閱讀 3192·2021-09-22 15:36
閱讀 2982·2021-09-04 16:48
閱讀 3142·2021-09-01 11:41
閱讀 2591·2019-08-30 13:49
閱讀 1492·2019-08-29 18:46
閱讀 3546·2019-08-29 17:28
閱讀 3425·2019-08-29 14:11