什么是Vue.nextTick()

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。
如果不使用nextTick,获取到的DOM为更新之前的。

举个例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <div>
        <button @click="notUseNextTick()" ref="aa">{{msg1}}</button>
        <button @click="UseNextTick()" ref="bb">{{msg2}}</button>
    </div>
</div>
<script src="vue.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            msg1: 'hello vue',
            msg2: 'hello vue'
        },
        methods: {
            notUseNextTick: function () {
                let that = this;
                that.msg1 = 'notUseNextTick'
                console.log(that.$refs.aa.innerText)
            },
            UseNextTick: function () {
                let that = this;
                that.msg2 = 'UseNextTick';
                Vue.nextTick(function () {
                    console.log(that.$refs.bb.innerText)
                })
            }
        },
    })
</script>
</body>
</html>

HearthstoneDeckTracker_sTbttzsP6B.gif

什么时候用?

Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中,
因为在created()钩子函数执行的时候DOM其实并未进行任何渲染,
而此时进行DOM操作无异于徒劳,所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。
与之对应的就是mounted钩子函数,因为该钩子函数执行时所有的DOM挂载已完成。

        created() {
            let that = this;
            Vue.nextTick(function (){
                that.$refs.aa.innerText='created修改了这个按钮'
            })
        }

Snipaste_2022-04-30_14-41-01.png

不使用nextTick会报错
Snipaste_2022-04-30_14-42-21.png