有沒有辦法檢測實際的 DOM 渲染何時完成？

Question

我有一個 Vue 組件，它使用圖表庫在canvas元素上繪制圖表。 我希望圖表占據與窗口的寬度成比例的寬度，這意味着圖表庫在將虛擬 DOM 渲染到瀏覽器中之前不知道它需要多大的canvas元素。

一旦渲染了DOM，有什么方法可以觸發圖表的渲染嗎？ Vue 包含mounted的生命周期鈎子，但觸發得太早，甚至在mounted后使用$nextTick在渲染管道中也太早了。

如果做不到這一點，是否有另一種（hack）方法可以檢測到 DOM 已經生成，以便我可以使用它來觸發圖表渲染？

Answer 1

我不想建議這樣做，但作為一種解決方法，您可以添加一個<script>...</script>片段來觸發一個事件（在 Vue 組件的 EOF 之前不久），您可以處理該事件來調用您的圖形渲染函數。 它應該大致如下所示：

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

讓我知道這是否適合你。

Answer 2

您可以使用 ref（請參閱docs ）將更改應用到 DOM。

在包含<canvas>元素的同一組件中的mounted鈎子中使用它。