Vue.nextTick是Vue官方給我們提供的一個API(方法)闲坎,作用是在下次DOM更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)疫粥。在修改數(shù)據(jù)之后立即使用這個方法,獲取更新后的DOM腰懂;
那么我們的理解是:當數(shù)據(jù)發(fā)生變化之后梗逮,DOM視圖并不會立即更新,如果我們在發(fā)生變化之后立馬去獲取某個節(jié)點或者某個節(jié)點的值绣溜,很有可能結(jié)果就是undefined慷彤;因為Vue實現(xiàn)響應式并不是數(shù)據(jù)發(fā)生變化之后DOM立即變化,而是按一定的策略進行DOM的更新怖喻;
應用場景:
在vue的生命周期鉤子函數(shù)created()中進行DOM操作的時候一定要把DOM操作放入到this.$nextTick()中底哗;
因為在created鉤子函數(shù)觸發(fā)的時候,DOM是沒有進行渲染的锚沸;DOM沒有進行渲染跋选,然后進行DOM操作無疑是徒勞的;
所以我們在created中進行DOM操作的時候咒吐,一定要將DOM操作放入到this.$nextTick()中野建;
與之相反的是mounted属划,因為當觸發(fā)mounted的時候,DOM的掛載和渲染都已經(jīng)完成了候生,所以在mounted中進行DOM操作是不會有任何問題的同眯;
因為DOM更新是異步的,像v-if指令判斷增刪DOM元素唯鸭,我們在方法中給變量賦值的時候须蜗,如果不使用this.$nextTick(),我們很有可能拿到的還是初始值目溉,如果想拿到更新后的值明肮,需要使用this.$nextTick()方法