Migration > Mount Changes の翻訳を追従 (#255)

naokie · web-flow · commit 374dfc9e1ed5 · 2021-04-20T00:00:20.000+09:00
* fead: add migration guide &gt; mount changes

* docs: translate migration guide &gt; mount api changes

* feat: link to translated pages
diff --git a/src/.vuepress/config.js b/src/.vuepress/config.js
@@ -194,19 +194,19 @@ const sidebar = {
         '/guide/migration/key-attribute',
         '/guide/migration/keycode-modifiers',
         '/guide/migration/listeners-removed',
-        // '/guide/migration/mount-changes',
+        '/guide/migration/mount-changes',
         // '/guide/migration/props-data',
         '/guide/migration/props-default-this',
         '/guide/migration/render-function-api',
         '/guide/migration/slots-unification',
         '/guide/migration/suspense',
         '/guide/migration/transition',
-        // '/guide/migration/transition-group',
+        '/guide/migration/transition-group',
         '/guide/migration/v-on-native-modifier-removed',
         '/guide/migration/v-model',
         '/guide/migration/v-if-v-for',
         '/guide/migration/v-bind',
-        // '/guide/migration/vnode-lifecycle-events',
+        '/guide/migration/vnode-lifecycle-events',
         '/guide/migration/watch'
       ]
     },
diff --git a/src/guide/migration/mount-changes.md b/src/guide/migration/mount-changes.md
@@ -0,0 +1,94 @@
+---
+title: 'マウント API の変更'
+badges:
+  - breaking
+---
+
+# 要素を置換しないアプリケーションのマウント <MigrationBadges :badges="$frontmatter.badges" />
+
+## 概要
+
+Vue 2.x では、 `template` を持つアプリケーションをマウントすると、レンダリングされたコンテンツがマウント先の要素を置き換えます。 Vue 3.x では、レンダリングされたアプリケーションは、子要素として追加され、要素の `innerHTML` を置き換えます。
+
+## 2.x での構文
+
+Vue 2.x では、 HTML 要素セレクタを `new Vue()` または `$mount` に渡します:
+
+```js
+new Vue({
+  el: '#app',
+  data() {
+    return {
+      message: 'Hello Vue!'
+    }
+  },
+  template: `
+    <div id="rendered">{{ message }}</div>
+  `
+})
+
+// または
+const app = new Vue({
+  data() {
+    return {
+      message: 'Hello Vue!'
+    }
+  },
+  template: `
+    <div id="rendered">{{ message }}</div>
+  `
+})
+
+app.$mount('#app')
+```
+
+このアプリケーションを渡されたセレクタ (ここでは `id="app"`) を持つ `div` のあるページにマウントした場合:
+
+```html
+<body>
+  <div id="app">
+    Some app content
+  </div>
+</body>
+```
+
+レンダリングされた結果は、上記の `div` がレンダリングされたアプリケーションのコンテンツと置き換えられます:
+
+```html
+<body>
+  <div id="rendered">Hello Vue!</div>
+</body>
+```
+
+## 3.x での構文
+
+Vue 3.x では、アプリケーションをマウントすると、レンダリングされたコンテンツが `mount` に渡した要素の `innerHTML` を置き換えます:
+
+```js
+const app = Vue.createApp({
+  data() {
+    return {
+      message: 'Hello Vue!'
+    }
+  },
+  template: `
+    <div id="rendered">{{ message }}</div>
+  `
+})
+
+app.mount('#app')
+```
+
+このアプリケーションを `id="app"` を持つ `div` のあるページにマウントすると、このようになります:
+
+```html
+<body>
+  <div id="app" data-v-app="">
+    <div id="rendered">Hello Vue!</div>
+  </div>
+</body>
+```
+
+## 参照
+
+- [`mount` API](/api/application-api.html#mount)
