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

【问题标题】：Is there a way to detect when the actual DOM render completes?有没有办法检测实际的 DOM 渲染何时完成？
【发布时间】：2018-06-14 16:13:46
【问题描述】：

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

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

如果做不到这一点，是否有另一种（hack）方法可以检测到 DOM 已生成，以便我可以使用它来触发图表渲染？

【问题讨论】：

这可能就是你要找的东西：vuejs.org/v2/guide/transitioning-state.html
遗憾的是，这里没有进行状态转换或数据更改。安装组件时所有数据都已到位。
mounted() 应该是正确的点，或者 $nextTick 在 mounted() 中，如果你也需要等待子组件完成渲染......你需要等待异步的东西吗好吗？

【解决方案1】：

我不想建议这样做，但作为一种解决方法，您可以添加一个<script>...</script> sn-p 来触发一个事件（在 Vue 组件的 EOF 之前不久），您可以处理该事件来调用您的图形渲染函数。它应该大致如下所示：

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

让我知道这是否适合您。

【讨论】：

【解决方案2】：

您可以使用 ref（参见 docs）将更改应用到 DOM。

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

【讨论】：