什么是Vue.nextTick()

官方解釋：在下次 DOM 更新循環結束之后執行延遲回調。在修改數據之后立即使用這個方法，獲取更新后的 DOM。

注意：重點是獲取更新后的DOM?就是在開發過程中有個需求是需要在created階段操作數據更新后的節點?這時候就需要用到Vue.nextTick()

原因

在created()鉤子函數執行的時候DOM 其實并未進行任何渲染，而此時進行DOM操作無異于徒勞，所以在created中一定要將DOM操作的js代碼放進Vue.nextTick()的回調函數中。與之對應的就是mounted()鉤子函數，因為該鉤子函數執行時所有的DOM掛載和渲染都已完成，此時在該鉤子函數中進行任何DOM操作都不會有問題 。

案例一

<template><div id="app"><div ref="msgDiv">{{msg1}}</div><br/><div>{{msg2}}</div><br/><br/><button @click="changeMsg">點擊我</button></div> </template> <script>export default {name: 'App',data(){return {msg1: "你我貸",msg2: "理財"}}, methods: {changeMsg() {this.msg1 = "飛旋"this.msg2 = this.$refs.msgDiv.textContent;console.log(this.$refs.msgDiv.textContent)this.$nextTick(function(){console.log(this.$refs.msgDiv.textContent)})}}} </script>復制代碼

觸發前：

觸發后：

案例二

<template><div id="app"><div ref="msgDiv" id="msgDiv" v-if="showDiv">{{msg1}}</div><button @click="changeMsg">點擊我</button></div> </template><script>export default {name: 'App',data(){return {msg1: "你我貸",showDiv: false}}, methods: {changeMsg() {this.showDiv = trueconsole.log(document.getElementById("msgDiv"))this.$nextTick(function(){console.log(document.getElementById("msgDiv"))})}}} </script> 復制代碼

點擊前：

點擊后：

注意：上面代碼執行后第一次console.log(document.getElementById("msgDiv"))輸出的是null?這里涉及一個重要的概念?異步更新隊列。

Vue在觀察到數據變化時并不是直接更新DOM，而是開啟一個隊列，并緩沖在同一事件循環中發生的所有數據改變。在緩沖時會去除重復數據，從而避免不必要的計算和DOM操作。然后，在下一個事件循環tick中，Vue刷新隊列并執行實際工作。 事實上，在執行this.showDiv = true;時，div仍然還是沒有被創建出來，直到下一個Vue事件循環時，才開始創建。$nextTick就是用來知道什么時候DOM更新完成的,因此上述代碼中第二個console.log(document.getElementById("msgDiv"))輸出的是<div id="msgDiv">你我貸</div>

總結

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

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