Vue中this.$nextTick()什么意思？

最新推荐文章于 2024-10-14 17:41:42 发布

原创最新推荐文章于 2024-10-14 17:41:42 发布 · 1.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue

本文介绍在Vue应用中如何利用$nextTick方法确保DOM更新后再执行图表绘制，避免图表显示位置偏移的问题。通过在mounted生命周期钩子内调用$nextTick，确保图表在页面刷新后正确显示。

理解：

等页面刷新完之后，再执行回调函数中的方法

比如在vue组件里的mounted()生命周期函数中加入this.$nextTick()

// 在执行mounted这个生命周期函数的时候，内存中的模板已经真实挂载到了页面中，我们已经可以看到渲染好的页面了
mounted () { 
    this.$nextTick(() => {
        // 页面刷新完后才会执行下面的chart()方法
        this.chart()    // 这个chart()方法是我在methods中写的用来展示图表的
    })
}

我在使用G2写好图表显示在页面中的时候，只要一刷新，图表就自己往右移。加上this.$nextTick(),像上面那样写就好了。再刷新就不会再右移了。