Vue中的$nextTick

1 - 作用

将回调延迟到下次DOM更新周期之后执行

2 - 使用场景

当数据改变后，Vue不会立即进行Dom更新，而是将改动的数据先缓存起来了，要等下一个DOM更新周期到了才会把这些数据更新到DOM里（即会在 updated 生命周期之后执行）

<div id="msg" @click="edit">{{ msg }}</div>


data() {
    return {
        msg: '修改前'
    }
}
methods: {
    edit() {
        this.msg = '修改后'
        const msgValue = document.getElementById('msg').innerHTML
        console.info(msgValue)  // 修改前
    }
}

<div id="msg" @click="edit">{{ msg }}</div>


data() {
    return {
        msg: '修改前'
    }
}
methods: {
    edit() {
        this.msg = '修改后'
        this.$nextTick(() => {
            const msgValue = document.getElementById('msg').innerHTML
            console.info(msgValue)  // 修改后
        })
    }
}