Subscribe on changes!

cloneNode issue for hoisted vnode

avatar
Nov 17th 2020

Version

3.0.2

Reproduction link

https://codesandbox.io/s/adoring-sinoussi-bsqni

Steps to reproduce

  1. first mount, Chart display correctly
  2. click toggle button twice to mount Chart again, it just display blank

What is expected?

I hope the chart could display correctly after remount

What is actually happening?

In production mode, the chart just display blank after remount


I found something on MDN.

cloneNode on mdn

It does not copy event listeners added using addEventListener() or those assigned to element properties (e.g., node.onclick = someFunction). Additionally, for a <canvas> element, the painted image is not copied.

call of cloneNode in vue source code

I want to know why the hostCloneNode must be called and in what scenario. Could vue just reuse the exact same hostNode without cloning it because it's "static"😂?

avatar
Nov 18th 2020

You have to dispose the chart when the component is destroyed

onUnmounted(() => {
      myChart.dispose();
    });