Vue.js中this.$nextTick()的使用
2020/11/17 10:04:34 閱讀：2823
發(fā)布者：2823
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，
所以就衍生出了這個獲取更新后的DOM的Vue方法。所以放在Vue.nextTick()回調(diào)函數(shù)中的執(zhí)行的應(yīng)該是會對DOM進(jìn)行操作的 js代碼
this.$nextTick()方法主要是用在隨數(shù)據(jù)改變而改變的dom應(yīng)用場景中，vue中數(shù)據(jù)和dom渲染由于是異步的，所以，要讓dom結(jié)構(gòu)隨數(shù)據(jù)改變這樣的操作都應(yīng)該放進(jìn)this.$nextTick()的回調(diào)函數(shù)中。created()中使用的方法時，dom還沒有渲染，如果此時在該鉤子函數(shù)中進(jìn)行dom賦值數(shù)據(jù)（或者其它dom操作）時無異于徒勞，所以，此時this.$nextTick()就會被大量使用，而與created()對應(yīng)的是mounted()的鉤子函數(shù)則是在dom完全渲染后才開始渲染數(shù)據(jù)，所以在mounted()中操作dom基本不會存在渲染問題。
