vue中的nextTick

2022-06-23 18:57:10 字數 625 閱讀 4742

​ 今天在瀏覽elementui官網時,又一次看到了nexttick,其實nexttick我已經不是第一次看到了,但之前都沒怎麼弄懂,這次決定好好研究一番……

獲取內容

data () ,

methods:

}}})

在該示例中,控制檯會丟擲一個innerhtml of null的錯誤,這是由於此時頁面並未完成渲染,它並沒有獲取到這個div元素。

在vue中,並不是資料一更新,dom就立即更新,頁面立即渲染,而是當一個事件迴圈結束後,dom才會完成更新,頁面才會成功渲染;

如通過一個for迴圈改變一個資料,即使這個for迴圈100次,dom也只會在第100次時才更新,而不是迴圈100次,dom就更新100次。

在本次示例中,若想成功獲取到這個div元素,就需引入今日主角"nexttick"

showandgettext () ) 

}

成功顯示出這個div元素的文字資訊

vue 中的nextTick

在vue生命週期的created 鉤子函式進行dom操作一定要放在vue nexttick 的 函式中。 因為在created 鉤子函式執行...

Vue nextTick

vue js 推薦以 資料驅動 的方式思考,避免直接接觸dom。但是有時候會遇到這種情況 當在資料變化後,我們需要操作相應的dom 如下面的例子 template div ul li v for item index in message key index ref list li ul div t...

簡單理解vue中的nextTick

vue是非同步渲染的,當data改變之後,dom不會立刻被渲染,頁面渲染時會將data的修改做整合,多次data修改只會做整合最後一次性渲染出來,這也是非同步渲染的原因。只有非同步渲染才可以實現整合操作。 methods 在你的 vue 檢視中, testnum 會發生變化。不過需要注意的是這個變化的過程...