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

YorkChen 發布于2019-08-20 14:46 / 862人閱讀

摘要：在數據變化后要執行的某個操作，而這個操作需要使用隨數據改變而改變的結構的時候，這個操作都應該放進的回調函數中。這樣回調函數在更新完成后就會調用。

關于作者

程序開發人員，不拘泥于語言與技術，目前主要從事PHP和前端開發，使用Laravel和VueJs，App端使用Apicloud混合式開發。合適和夠用是最完美的追求。

個人網站：http://www.linganmin.cn

最近剛寫了一個手機在線播放的H5電影站：http://www.ifilm.ltd

什么是Vue.nextTick()

官方文檔解釋如下：

在下次 DOM 更新循環結束之后執行延遲回調。在修改數據之后立即使用這個方法，獲取更新后的 DOM。

我理解的官方文檔的這句話的側重點在最后那半句獲取更新后的DOM，獲取更新后的DOM言外之意就是什么操作需要用到了更新后的DOM而不能使用之前的DOM或者使用更新前的DOM或出問題，所以就衍生出了這個獲取更新后的DOM的Vue方法。所以放在Vue.nextTick()回調函數中的執行的應該是會對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()鉤子函數進行的DOM操作一定要放在Vue.nextTick()的回調函數中。原因是什么呢，原因是在created()鉤子函數執行的時候DOM 其實并未進行任何渲染，而此時進行DOM操作無異于徒勞，所以此處一定要將DOM操作的js代碼放進Vue.nextTick()的回調函數中。與之對應的就是mounted鉤子函數，因為該鉤子函數執行時所有的DOM掛載和渲染都已完成，此時在該鉤子函數中進行任何DOM操作都不會有問題。

在數據變化后要執行的某個操作，而這個操作需要使用隨數據改變而改變的DOM結構的時候，這個操作都應該放進Vue.nextTick()的回調函數中。

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

安小下同學

云服務器 GPU云服務器以下關于彈性云服務器說法正確的是關于jdk的使用關于宏的使用關于使用linux的相關軟件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/81900.html

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

摘要：在數據變化后要執行的某個操作，而這個操作需要使用隨數據改變而改變的結構的時候，這個操作都應該放進的回調函數中。這樣回調函數在更新完成后就會調用。關于作者程序開發人員，不拘泥于語言與技術，目前主要從事PHP和前端開發，使用Laravel和VueJs，App端使用Apicloud混合式開發。合適和夠用是最完美的追求。個人網站：http://www.linganmin.cn 最近剛寫...

CHENGKANG 2019-08-01 16:26 評論0 收藏0
詳細分析Vue.nextTick()實現

摘要：因為平時使用都是傳回調的，所以很好奇什么情況下會為，去翻看官方文檔發現起新增如果沒有提供回調且在支持的環境中，則返回一個。這就對了，函數體內最后的判斷很明顯就是這個意思沒有回調支持。 Firstly, this paper is based on Vue 2.6.8剛開始接觸Vue的時候，哇nextTick好強，咋就在這里面寫就是dom更新之后，當時連什么macrotask、micro...

DevYK 2019-08-26 13:40 評論0 收藏0
【Vue原理】NextTick - 源碼版之獨立自身

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

劉東 2019-08-26 18:36 評論0 收藏0
Vue.nextTick 的原理和用途

摘要：在查詢了各種資料后，總結了一下其原理和用途，如有錯誤，請不吝賜教。截取關鍵部分如下具體來說，異步執行的運行機制如下。知乎上的例子改變數據想要立即使用更新后的。需要注意的是，在和階段，如果需要操作渲染后的試圖，也要使用方法。對于 Vue.nextTick 方法，自己有些疑惑。在查詢了各種資料后，總結了一下其原理和用途，如有錯誤，請不吝賜教。概覽官方文檔說明：用法：在下次 DO...

fevin 2019-08-22 13:51 評論0 收藏0