当调用 Vue Component 的挂载钩子时，里面的所有 DOM 都已经渲染了吗？

Posted 2023-02-22

【中文标题】当调用 Vue Component 的挂载钩子时，里面的所有 DOM 都已经渲染了吗？

【英文标题】：When Vue Component mounted hook called, have all the DOMs inside already been rendered?

【发布时间】：2019-06-10 22:05:04

【问题描述】：

更新：我忘记在该 div 级别中删除 v-if，这会阻止底层元素被渲染

---

快速提问，在 Vue 中，如果我有这样的组件：

<uploader></uploader>

在其模板内：

<div><input type="file" ref="upldr" /></div>

我想知道为什么我不能像这样访问那个输入 DOM：

this.$refs.upldr

它给了我undefined

是不是说当mounted hook被调用时，模板内的所有DOM元素都没有被渲染？

谢谢，

【问题讨论】：

组件模板中的所有 DOM 元素都在调用 mounted 时被渲染。这是使用您提供的信息的简单小提琴：jsfiddle.net/qp0g1m76

我的第一个想法是，<input/> 内部的 v-if 评估为假。在这种情况下，v-if 元素及其内容不会出现在 DOM 中。如果不是这种情况，您需要共享一个mcve，因为可能有很多事情导致该值成为undefined。

@thanksd 谢谢，这正是我愚蠢的做法。

【参考方案1】：

查看官方 Vue 文档了解其生命周期。

据此，一旦你到达mounted 钩子，DOM 将被完全渲染并完成。这是您可以附加的最后一个钩子，它不是事件或退出函数。

简而言之：是的，一旦您到达mounted，一切准备就绪，一切就绪，剩下的只是与更新或退出 Vue 相关。