Migration guide: document changes in mounting point

[leopiccionia]

In Vue 3.0, there's a subtle breaking change in app mounting (see RFC).

In Vue 2.x, app element's outerHTML is replaced (and eventually compiled to a template, if root component has no template/render). Vue 3.x now uses app element's innerHTML, instead.

This change usually is harmless, but code that expects previous behavior may break (e.g. vuejs/core#1642 and vuejs/core#1696).

I couldn't find any mention to this behavior change in migration guide. I'm sorry if this is not the case.

[NataliaTepluhina]

@leopiccionia thank you for mentioning this! I believe you're correct and we should mention this in the migration guide

[skirtles-code]

The lifecycle diagram will also need updating:

I believe the change from outerHTML to innerHTML is a consequence of a larger change to how the mounting element is used. In Vue 2 the element was replaced, whereas in Vue 3 it is used as a container. This impacts all Vue applications, not just those using in-DOM templates.

For example, if you have an SFC with a template like this:

<template>
  <div id="app">
    ... Content ...
  </div>
</template>

and you mount it to an element like this:

<div id="app"></div>

the resulting DOM will be:

<div id="app" data-v-app>
  <div id="app">
    ... Content ...
  </div>
</div>

Note that there are now two elements with id="app", whereas in Vue 2 there would only be one.