明明在挂载的时候，还使用了nextTick，为啥第一次加载还是会出现找不到元素的，我有点搞不懂，谢谢
html：
mouted()：
控制台：
3条回答 默认 最新
前端小咸鱼一条 2022-08-24 16:23关注offsetTop问题第一次无法拿到，直接return
addEventListener写错了，应该是removeEventListener
本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏举报
分享
- 2022-09-25 11:39前端不加班的博客 在数据变化后要执行的某个操作，而这个操作需要使用随数据改变而改变的DOM结构的时候，这个操作都应该放进Vue.nextTick()的回调函数中。在Vue生命周期的created()和mounted()钩子函数进行的DOM操作一定要放在Vue....
- 2024-05-31 18:23三掌柜666的博客 在前端开发中，涉及到JS...那么本篇博文就来分享一下关于$nextTick()的使用及原理，该内容不仅在日常前端开发中是比较重要核心的知识点，而且在前端求职面试时候面试官必考的知识点，总结记录一下，方便后期查阅使用。
- 2021-12-09 23:43不吃芒果……的博客 但是，挂载阶段还没有开始，所以this.$refs获取不到DOM。 2. 获取的是设置了v-if/v-show的元素： 如果在DOM结构中的某个DOM节点使用了v-if、v-show或v-for（根据后台数据动态操作DOM），那么这些DOM 在mounted阶段是...
- 2024-10-21 12:11均明的博客 发现一个问题,在mounted里面先获取元素高度会变成0,nextTick里面会是500,showBar里面是0。不要在mounted里面用nextTick,而在需要的函数里面使用。
- 2025-06-07 19:21鸡吃丸子的博客 nextTick的常见使用场景有哪些 A： 1、确保 DOM 更新完成后执行某些操作（如获取元素尺寸、滚动位置等）。 2、在子组件挂载后执行某些操作（如调用子组件的方法）。 3、在批量更新数据后，确保所有更新完成后再执行...
- 2021-02-20 08:46前端学习机的博客 使用setTimeout(0), 将任务放在事件队列的最后获取, 而使用this.$nextTick()的话还是获取不到, 原因应该是在下一次DOM更新结束后v-html添加的内容还没挂载到DOM树上
- 2025-10-09 18:49森林里的一只猫的博客 nextTick 作用：将回调函数延迟到 DOM 更新完成后执行，解决“数据修改后无法立即获取最新 DOM”的问题。Vue2 与 Vue3 差异原理一致：均采用异步批量更新策略；用法差异：Vue3 需单独引入nextTick，且支持语法；高频...
- 2024-08-01 21:35北原_春希的博客 nextTick方法在 Vue.js 中扮演着重要的角色，它用于在下次 DOM 更新循环结束之后执行延迟回调。这主要用于确保在 Vue 完成 DOM 更新后执行依赖于 DOM 的操作。
- 2023-12-12 16:00zn_firm的博客 2)带有v-for指令，当初始化时，要循环的数组没有值，这个时候是获取不到 相关dom的。重点：有v-show指令时,即使值为false，依旧能获取到相应的dom，切记他和v-if不一样。动态dom有2种情况：1）带有v-if指令，获取不...
- 2020-11-29 02:47例如，如果你的`ref`绑定在一个使用`v-if`的元素上，而在`mounted()`中尝试访问，由于`v-if`可能导致元素在初始渲染时未被添加到DOM中，所以`this.$refs`无法找到对应的元素。同理，`v-for`和`v-show`也会影响元素...
- 2024-08-21 10:26FE_Jinger的博客 https://www.cnblogs.com/trampeagle/p/15146668.htmlelement-UI 组件 dialog 中 ref 获取不到的问题解决方案_el-dialog ref获取不到-CSDN博客
- 2025-05-12 14:14妮在想什么的博客 在前端开发的世界里，弹窗是一种常见的交互组件，而当弹窗中承载富文本或画布功能时，有时会出现令人头疼的状况 —— 它们不出现，甚至提示获取不到 DOM。这不仅影响用户体验，也给开发者带来诸多调试难题。今天，...
- 2025-04-13 10:15大樊子的博客 nextTick是 Vue 中处理异步 DOM 更新的关键工具，合理使用可以解决很多 DOM 操作时机问题，但也要避免不必要的使用。
- 2022-06-17 13:56写代码的小王吧的博客 其实上面的函数是在我们导入时，该框架本身做的一些初始化，这和我们执行构造函数时内部的初始化不一样。这些函数主要是在我们使用前，向构造函数的原型上添加一些函数。而当我们执行构造函数时，也会在内部进行一些...
- 2021-10-25 11:43牛先森家的牛奶的博客 vue问题之数据更新DOM节点中不能立即更新问题（使用vue的this.$nextTick()函数） 问题描述： 父组件有数组数据，遍历子组件，然后父组件里面使用子组件中的数据，但是当子组件对应的数据被删除时，页面更新了，但是...
- 2024-07-26 20:40小鼠米奇的博客 在Vue中，通常我们不建议直接操作DOM元素，因为Vue的设计哲学是声明式渲染，即你通过Vue的模板语法（如插值表达式、指令等）来描述你的界面，Vue会负责将你的数据渲染成DOM，并在数据变化时自动更新DOM。然而，在...
- 2025-06-03 20:21冲浪的鹏多多的博客 nextTick是Vue中用于在DOM更新后执行回调的API，其语法支持回调函数和Promise两种形式。主要使用场景包括：数据变化后获取最新DOM、在created生命周期...文章还通过实例展示了如何利用nextTick获取动态生成的DOM节点。
- 2018-12-27 18:19我坑我承认的博客 时获取不到dom节点 正常能获取到应该是如下图： 然后我又用了网上的方法: this.$refs.foodList （foodList是li的dom节点） 结果还是刷新页面时获取不到dom 然后我对比了网友访的饿了么的源码，下面是网友的 下面...
- 2025-03-22 20:35前端布洛芬的博客 除了生命周期钩子函数，在组件的...当在自定义方法中修改了组件的数据，并且需要在DOM更新后进行操作时，就可以使用nextTick。使用场景：比如在点击事件处理函数中修改数据后，需要对更新后的DOM进行操作。示例代码。
- 没有解决我的问题, 去提问
问题事件
系统已结题
9月1日
已采纳回答
8月24日-
创建了问题
8月24日