Vue.nextTick()理解

什麼是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 = true
                console.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>