关于vue3 的onMounted,有坑

21,288 阅读1分钟

首先说说onMounted

作为一个生命周期钩子,肯定是有其意义。我所以理解的onMounted就是页面渲染完成。此时已经可以拿到真实dom了。

image.png

这是我在网上搜索看到的回答之一

问题

在开发的时候,我有一个场景,就是父组件中包含了一个子组件,父组件会通过一个方法去在子组件中生成一个图表。也就是类似echarts的init。当然,节点是在子组件中的节点。

but

当我满心欢喜的去父组件的onMounted钩子,并获取dom元素节点的时候,发现,获取不到QAQ。我寻思,父组件都构造完了,为什么子组件的元素却还获取不到?? 于是我便做了一个处理,子组件onMounted的时候向父组件emit一个事件,表示子组件已经构造完成。

父组件

image.png

子组件

image.png

结果

image.png

ps: 我不是很明白为什么会出现这个问题,为什么父组件会比子组件更先构造完成

子组件代码地址

父组件代码地址

我是个小菜鸡,求助各位大佬