Vuejs中的nextTick

缘如风

已于 2024-03-26 14:31:39 修改

阅读量542

点赞数 1

CC 4.0 BY-SA版权

分类专栏： VueJS 文章标签： vue.js 前端 javascript

于 2024-03-26 11:38:59 首次发布

本文链接：https://blog.youkuaiyun.com/chyuanrufeng/article/details/137041252

文章讲述了在Vue组件中，由于DOM更新的异步性，可能导致在父组件onMounted函数中调用子组件方法时出现undefined。解决方法是使用nextTick或setTimeout来确保在所有子组件挂载完成后执行相关操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题：

当在父组件中onMounted函数中调用一些子组件的方法时，提示是undefined。原因是mounted 不会承诺所有的子组件也都一起被挂载完成。

解决方法利用 nextTick 或者setTimeout

onMounted(()=>{

    //利用nextTick 延迟执行 同 setTimeout执行
    nextTick(()=>{
        dosomething();
    })
    //直接在这里面 使用 dlgCheckboxRef 有点问题。。。。。
    //有些东西还没挂载完
    // setTimeout(()=>{
    //     dosomething();
    // },500)
    // https://segmentfault.com/a/1190000012861862
})

官网说明

当你在 Vue 中更改响应式状态时，最终的 DOM 更新并不是同步生效的，而是由 Vue 将它们缓存在一个队列中，直到下一个“tick”才一起执行。这样是为了确保每个组件无论发生多少状态改变，都仅执行一次更新。

nextTick() 可以在状态改变后立即使用，以等待 DOM 更新完成。你可以传递一个回调函数作为参数，或者 await 返回的 Promise

参考 javascript - Vue.nextTick 的原理和用途 - 个人文章 - SegmentFault 思否

参考全局 API：常规 | Vue.js (vuejs.org)