雖然 Vue.js 通常鼓勵(lì)開發(fā)人員沿著“數(shù)據(jù)驅(qū)動(dòng)”的方式思考，避免直接接觸 DOM，但是有時(shí)我們確實(shí)要這么做。比如一個(gè)新聞滾動(dòng)的列表項(xiàng)。如果在這里需要操作dom, 應(yīng)該是等待 Vue 完成更新 DOM之后。

一、新聞滾動(dòng)列表

1、在created函數(shù)中獲取后臺(tái)數(shù)據(jù)；

2、模板引擎中用v-for生成列表項(xiàng)；

3、調(diào)用滾動(dòng)函數(shù)，假設(shè)該滾動(dòng)函數(shù)式原聲方法寫的；

4、什么時(shí)候開始調(diào)用滾動(dòng)函數(shù)比較合適呢？

?

二、this.$nextTick()

官方解釋：將回調(diào)延遲到下次 DOM 更新循環(huán)之后執(zhí)行。在修改數(shù)據(jù)之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一樣，不同的是回調(diào)的 this 自動(dòng)綁定到調(diào)用它的實(shí)例上。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

Vue.component('example', { ??template:?'<span>{{ message }}</span>', ??data:?function?() { ????return?{ ??????message:?'not updated' ????} ??}, ??methods: { ????updateMessage:?function?() { ??????this.message =?'updated' ??????console.log(this.$el.textContent)?// => 'not updated' ??????this.$nextTick(function?() { ????????console.log(this.$el.textContent)?// => 'updated' ??????}) ????} ??} })

?

三、新聞滾動(dòng)列表中的this.$nextTick()放哪里？

　　因?yàn)閿?shù)據(jù)是根據(jù)請(qǐng)求之后獲取的，所以應(yīng)該放到請(qǐng)求的回調(diào)函數(shù)里面。

四、注意this.nextTick()

1 2	this.nextTick(callback)，當(dāng)數(shù)據(jù)發(fā)生變化，更新后執(zhí)行回調(diào)。 this.$nextTick(callback)，當(dāng)dom發(fā)生變化，更新后執(zhí)行的回調(diào)。

轉(zhuǎn)載于:https://www.cnblogs.com/mmzuo-798/p/9318053.html

總結(jié)

以上是生活随笔為你收集整理的在vue中操作DOM--this.$nextTick()的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。