當前位置：首頁 > 前端技术 > vue >内容正文

vue

Vue $nextTick

發布時間：2023/12/2 vue 33 豆豆

生活随笔收集整理的這篇文章主要介紹了 Vue $nextTick 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1、概述

Vue在觀察到數據變化時并不是立即更新DOM，而是開啟一個隊列，并緩沖在同一個事件循環中發生所有數據的改變。

在緩沖時會去除重復的數據，從而避免不必要的計算和DOM操作。

在下一個事件循環的tick中，Vue刷新隊列并執行實際（已去重）的工作。

Vue是異步更新DOM（異步更新隊列）。

$nextTick就是知道什么時候DOM更新完成的。

2、示例代碼

<!DOCTYPE html> <html lang="zh"><head><meta charset="UTF-8" /><title>Vue</title></head><body><div id="app"><div id="div" v-if="showDiv">這是一段文本</div><button @click="getText()">獲取div的內容</button></div><script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script><script type="text/javascript">new Vue({el: "#app",data: {showDiv: false},methods: {getText: function() {this.showDiv = true;this.$nextTick(function() {var text = document.getElementById('div').innerHTML;console.log(text)});}}})</script></body></html>

更多專業前端知識，請上【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的Vue $nextTick的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

Vue
nextTick