From ed5002568109ac1abe172df79ec2ff6a1b8c3ff0 Mon Sep 17 00:00:00 2001 From: NataliaTepluhina Date: Tue, 9 Mar 2021 17:17:55 +0100 Subject: [PATCH 01/12] feat: added mount API changes page --- src/guide/migration/mount-changes.md | 94 ++++++++++++++++++++++++++++ 1 file changed, 94 insertions(+) create mode 100644 src/guide/migration/mount-changes.md diff --git a/src/guide/migration/mount-changes.md b/src/guide/migration/mount-changes.md new file mode 100644 index 0000000000..457b70d62e --- /dev/null +++ b/src/guide/migration/mount-changes.md @@ -0,0 +1,94 @@ +--- +title: '`mount` API changes' +badges: + - breaking +--- + +# Mounted application does not replace the element + +## Overview + +In Vue 2.x, when mounting an application, the rendered result replaces the element we mount to. In Vue 3.x, rendered application is appended as a child of such an element. + +## 2.x Syntax + +In Vue 2.x, we pass an HTML element selector to `new Vue()` or `$mount`: + +```js +new Vue({ + el: '#app', + data() { + return { + message: 'Hello Vue!' + } + }, + template: ` +
{{ message }}
{{ message }} +
+ Some app content +
+ +``` + +in the rendered result, the mentioned `div` will be replaced with the rendered application content: + +```html + +
Hello Vue!
+ +``` + +## 3.x Syntax + +In Vue 3.x, when we mount an application, its rendered content will replace the `innerHTML` of the element we pass to `mount`: + +```js +const app = Vue.createApp({ + data() { + return { + message: 'Hello Vue!' + } + }, + template: ` +
{{ message }}
+ ` +}) + +app.mount('#app') +``` + +A code above, when app is mounted to the page that has a `div` with `id="app"`, will result in + +```html + +
+
Hello Vue!
+
+ +``` + +## See also + +- [`mount` API](/api/application-api.html#mount) From 0ab7a975b23c706ab0cb3d9a7a71cbc9e41c901b Mon Sep 17 00:00:00 2001 From: NataliaTepluhina Date: Tue, 9 Mar 2021 17:22:38 +0100 Subject: [PATCH 02/12] fix: added changes to mount API --- src/.vuepress/config.js | 1 + src/api/application-api.md | 2 +- src/guide/migration/introduction.md | 4 ++-- src/guide/migration/mount-changes.md | 2 +- 4 files changed, 5 insertions(+), 4 deletions(-) diff --git a/src/.vuepress/config.js b/src/.vuepress/config.js index ec7daf4cca..8abb17e461 100644 --- a/src/.vuepress/config.js +++ b/src/.vuepress/config.js @@ -194,6 +194,7 @@ const sidebar = { '/guide/migration/key-attribute', '/guide/migration/keycode-modifiers', '/guide/migration/listeners-removed', + '/guide/migration/mount-changes', '/guide/migration/props-data', '/guide/migration/props-default-this', '/guide/migration/render-function-api', diff --git a/src/api/application-api.md b/src/api/application-api.md index 4571262091..9feb5daf69 100644 --- a/src/api/application-api.md +++ b/src/api/application-api.md @@ -191,7 +191,7 @@ Apart from `el`, you should treat these arguments as read-only and never modify - **Usage:** - Mounts a root component of the application instance on the provided DOM element. + Mounts a root component of the application instance on the provided DOM element. The `innerHTML` of the DOM element will be replaced with the rendered application. - **Example:** diff --git a/src/guide/migration/introduction.md b/src/guide/migration/introduction.md index cf462c015e..941d0532a3 100644 --- a/src/guide/migration/introduction.md +++ b/src/guide/migration/introduction.md @@ -104,13 +104,13 @@ The following consists a list of breaking changes from 2.x: - [`` now renders no wrapper element by default](/guide/migration/transition-group.html) - [When watching an array, the callback will only trigger when the array is replaced. If you need to trigger on mutation, the `deep` option must be specified.](/guide/migration/watch.html) - `