Vue.js中this.$nextTick()的使用
2020/11/17 10:04:34 閱讀：2646
發(fā)布者：2646
Vue 實(shí)現(xiàn)響應(yīng)式并不是數(shù)據(jù)發(fā)生變化之后 DOM 立即變化，而是按一定的策略進(jìn)行 DOM 的更新。$nextTick 是在下次 DOM 更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)，在修改數(shù)據(jù)之后使用 $nextTick，則可以在回調(diào)中獲取更新后的 DOM，
所以就衍生出了這個(gè)獲取更新后的DOM的Vue方法。所以放在Vue.nextTick()回調(diào)函數(shù)中的執(zhí)行的應(yīng)該是會(huì)對(duì)DOM進(jìn)行操作的 js代碼
this.$nextTick()方法主要是用在隨數(shù)據(jù)改變而改變的dom應(yīng)用場(chǎng)景中，vue中數(shù)據(jù)和dom渲染由于是異步的，所以，要讓dom結(jié)構(gòu)隨數(shù)據(jù)改變這樣的操作都應(yīng)該放進(jìn)this.$nextTick()的回調(diào)函數(shù)中。created()中使用的方法時(shí)，dom還沒(méi)有渲染，如果此時(shí)在該鉤子函數(shù)中進(jìn)行dom賦值數(shù)據(jù)（或者其它dom操作）時(shí)無(wú)異于徒勞，所以，此時(shí)this.$nextTick()就會(huì)被大量使用，而與created()對(duì)應(yīng)的是mounted()的鉤子函數(shù)則是在dom完全渲染后才開始渲染數(shù)據(jù)，所以在mounted()中操作dom基本不會(huì)存在渲染問(wèn)題。
