Reparenting in Vue

[bjarkihall]

Hi,

I'm not sure where this should be discussed, but is there some technical reason why vue doesn't support reparenting?

For the longest time, we've been able to "key" elements inside an array for reordering, but moving expensive elements around the VDOM doesn't seem to be possible without losing state - since the reconciliation step discards branches of the tree that have changed and rerenders them from scratch.

Now if it was possible to tell vue that a branch has already been rendered, it would gain us performance benefits and enable more dynamic UIs, where e.g. drag/drop and modals would be more easy to handle.

Most elements can be moved around the DOM without any issues, the only limitation seems to be <video> (which pauses when moved in some browsers) and <iframe> (which will always refresh when moved), they can still be moved around but I think it's important to at least know about these special cases.

Note, that Teleport does not solve reparenting as it only supports targeting elements outside the vue tree: vuejs/core#2015
KeepAlive also just seems to be designed for sibling nodes.

I can see 2 different solutions to this problem:

1. If vue supported global keys to indicate that an node has already been rendered and can simply be moved to the new location - just like when reordering nodes in an array, but nodes can be moved further around in the vdom.
2. If Teleport could support targets inside vue's vdom.

Alternative suggestions are welcome, I mainly wanted to open the discussion to get some feedback about why this isn't implemented in most libraries/frameworks today, while the DOM doesn't seem to have anything against it.
E.g. the react feature-request for reparenting was filed in 2015 and is still open: facebook/react#3965