Docs > Migration from Vue 2 の細かな差分 (#359)

* fix: update link to <script setup> RFC

vuejs/docs@f0b4e44#diff-f33c8ecc58b0894342124aa3a90c3fcde6f0ba09588ee6b20b1fe0056e378137

* docs: 📝 clarify async components for Vue Router

vuejs/docs@4c7c1e5#diff-f33c8ecc58b0894342124aa3a90c3fcde6f0ba09588ee6b20b1fe0056e378137

* chore: switch javascript code blocks to js

vuejs/docs@5753b78#diff-f33c8ecc58b0894342124aa3a90c3fcde6f0ba09588ee6b20b1fe0056e378137

Author: naokie

src/guide/migration/async-components.md

@@ -20,14 +20,14 @@ badges:
 以前、非同期コンポーネントは Promise を返す関数としてコンポーネントを定義することで、このように簡単に作成されました:
 
 ```js
-const asyncPage = () => import('./NextPage.vue')
+const asyncModal = () => import('./Modal.vue')
 ```
 
 または、オプション付きのさらに高度なコンポーネント構文として:
 
 ```js
-const asyncPage = {
-  component: () => import('./NextPage.vue'),
+const asyncModal = {
+  component: () => import('./Modal.vue'),
   delay: 200,
   timeout: 3000,
   error: ErrorComponent,
@@ -45,25 +45,29 @@ import ErrorComponent from './components/ErrorComponent.vue'
 import LoadingComponent from './components/LoadingComponent.vue'
 
 // オプションなしの非同期コンポーネント
-const asyncPage = defineAsyncComponent(() => import('./NextPage.vue'))
+const asyncModal = defineAsyncComponent(() => import('./Modal.vue'))
 
 // オプション付きの非同期コンポーネント
-const asyncPageWithOptions = defineAsyncComponent({
-  loader: () => import('./NextPage.vue'),
+const asyncModalWithOptions = defineAsyncComponent({
+  loader: () => import('./Modal.vue'),
   delay: 200,
   timeout: 3000,
   errorComponent: ErrorComponent,
   loadingComponent: LoadingComponent
 })
 ```
 
+::: tip NOTE
+Vue Router は *遅延読み込み* と呼ばれるルートコンポーネントを非同期に読み込む似たような仕組みをサポートしています。似てはいますが、この機能は Vue の非同期コンポーネントのサポートとは異なります。 Vue Router でルートコンポーネントを構成するときは、 `defineAsyncComponent` を **使用しない** 必要があります。これについては、 Vue Router のドキュメントの [ルートの遅延読み込み](https://next.router.vuejs.org/guide/advanced/lazy-loading.html) で詳しく説明されています。
+:::
+
 2.x からなされたもう一つの変更は、直接コンポーネント定義を提供できないことを正確に伝えるために `component` オプションの名前が `loader` に替わったことです。
 
 ```js{4}
 import { defineAsyncComponent } from 'vue'
 
-const asyncPageWithOptions = defineAsyncComponent({
-  loader: () => import('./NextPage.vue'),
+const asyncModalWithOptions = defineAsyncComponent({
+  loader: () => import('./Modal.vue'),
   delay: 200,
   timeout: 3000,
   errorComponent: ErrorComponent,

src/guide/migration/custom-directives.md

@@ -86,15 +86,15 @@ app.directive('highlight', {
 
 Vue 2 では、コンポーネントインスタンスは `vnode` 引数を使ってアクセスする必要がありました。
 
-```javascript
+```js
 bind(el, binding, vnode) {
   const vm = vnode.context
 }
 ```
 
 Vue 3 では、インスタンスは `binding` の一部になりました。
 
-```javascript
+```js
 mounted(el, binding, vnode) {
   const vm = binding.instance
 }

src/guide/migration/filters.md

@@ -79,7 +79,7 @@ badges:
 
 その代わり、 [globalProperties](../../api/application-config.html#globalproperties) によって、すべてのコンポーネントがグローバルフィルタを利用できるようにすることができます:
 
-```javascript
+```js
 // main.js
 const app = createApp(App)
 

src/guide/migration/introduction.md

@@ -46,7 +46,7 @@ Vue 3 で注目すべきいくつかの新機能の次のとおりです。
 - [Fragments](/guide/migration/fragments.html)
 - [Emits Component Option](/guide/component-custom-events.html)
 - カスタムレンダラを作るための [`@vue/runtime-core` の `createRenderer` API](https://github.com/vuejs/vue-next/tree/master/packages/runtime-core)
-- [SFC での Composition API の Syntax Sugar (`<script setup>`)](https://github.com/vuejs/rfcs/blob/sfc-improvements/active-rfcs/0000-sfc-script-setup.md) <Badge text="experimental" type="warning" />
+- [SFC での Composition API の Syntax Sugar (`<script setup>`)](https://github.com/vuejs/rfcs/blob/script-setup-2/active-rfcs/0000-script-setup.md) <Badge text="experimental" type="warning" />
 - [SFC でのステートドリブンな CSS Variables (`<style>` の `v-bind`)](https://github.com/vuejs/rfcs/blob/style-vars-2/active-rfcs/0000-sfc-style-variables.md) <Badge text="experimental" type="warning" />
 - [SFC での `<style scoped>` は、グローバルルールまたはスロットされたコンテンツのみを対象とするルールを含めることができるようになった](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0023-scoped-styles-changes.md)
 - [Suspense](/guide/migration/suspense.html) <Badge text="experimental" type="warning" />

src/guide/migration/listeners-removed.md

@@ -10,7 +10,7 @@ badges:
 
 `$listeners` オブジェクトは Vue 3 で削除されました。イベントリスナは `$attrs` の一部になりました。
 
-```javascript
+```js
 {
   text: 'this is an attribute',
   onClose: () => console.log('close Event triggered')
@@ -54,7 +54,7 @@ export default {
 
 もしこのコンポーネントが `id` 属性と `v-on:close` リスナを受け取った場合、 `$attrs` オブジェクトは次のようになります:
 
-```javascript
+```js
 {
   id: 'my-input',
   onClose: () => console.log('close Event triggered')