有没有办法检测实际DOM渲染何时完成？

Question

我有一个Vue组件，它使用图表库在canvas元素上绘制图表。我希望图表占据与窗口宽度成比例的宽度，这意味着图表库不知道在将虚拟DOM渲染到其中之前需要多大才能生成其canvas元素。浏览器。

有没有什么方法可以在渲染DOM后触发图表的渲染？ Vue包含mounted生命周期钩子，但过早触发，甚至在$nextTick之后使用mounted在渲染管道中过早。

如果失败了，是否有其他（黑客）方式我可以检测到DOM已经生成，所以我可以使用它来触发图表渲染？

Answer 1

我讨厌建议这个但是作为一个解决方法你可以添加一个<script>...</script>片段来触发一个事件（在EOF Vue组件的前面），你可以处理它来调用你的图形渲染功能。 它应该看起来像这样：

<vue-component> 
    <!-- component contents -->
    <!-- ... -->
    <script> // trigger-code </script> 
</vue-component>

如果这对你有用，请告诉我。

Answer 2

您可以使用ref（请参阅docs）将更改应用于DOM。

在包含mounted元素的同一组件的<canvas>挂钩中使用它。