VUE不全记录 - $nextTick用法

$nextick用法

语法

this.$nextTick(() => {});

// $nextTick()返回一个Promise对象，使用RS7中async/await语法完成。

data() {
    return {
        message: '未更新'
    }
}
methods: {
    updateData() {
        this.message = '已更新';
        console.log(获取对应dom元素的值); // '未更新'
        this.$nextTick(() => {
            console.log(获取对应dom元素的值); // '已更新'
        })
    }
}

async/await

async updateData() {
    this.message = '已更新'
    console.log(获取对应dom元素的值) // '未更新'
    await this.$nextTick()
    console.log(获取对应dom元素的值) // '已更新'
}

使用场景

• 在生命周期函数created()中进行的dom操作，一定要放到nextTick的回调函数中！
• 在数据变化后要执行某个操作，这个操作需要使用随数据变化而变化的dom结构时，这个操作都应该放进nextTick的回调函数中！

原因

• Vue异步执行dom更新。
• 只要监听到数据变化，Vue将开启一个队列。缓冲在同一事件循环中发生的所有数据改变。
• 如果同一个watcher被多次触发，只会被推入到队列中一次。在下一个事件循环tick中，Vue刷新队列并执行实际工作。