$nextTick

最新推荐文章于 2024-08-15 15:11:54 发布

LabeLyz

最新推荐文章于 2024-08-15 15:11:54 发布

阅读量56

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/m0_51400347/article/details/116407596

版权

vue 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

什么是nextTick？Vue官网是这样定义的：将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。

我们来看下面的代码：

<body>
    <div id="app">
        <h1 ref="h1">{{msg}}</h1>
        <button @click="next">next</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                msg: 'nextTick'
            },
            methods: {
                next() {
                    this.msg = 'vue';
                    console.log(this.$refs.h1.innerText);
                }
            }
        })
    </script>
</body>

我们点击按钮，让nextTick变为vue，然后我们获取h1，然后打印h1.innerText，发现打印出来的还是之前的nextTick

在这里插入图片描述

这是为什么呢？我们可以这样理解，Vue 在更新 DOM时是异步执行的。当数据发生变化，Vue将开启一个异步更新队列，视图需要等队列中所有数据变化完成之后，再统一进行更新

如果我们希望msg的值修改后立即获取dom中的innerHTML，我们可以使用nextTick：

methods: {
    next() {
        this.msg = 'vue';
        this.$nextTick(() => {
            console.log(this.$refs.h1.innerText);
        })
    }
}

在这里插入图片描述
这里我们就打印出了我们想要的结果了

LabeLyz

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录