Merge remote-tracking branch 'upstream/lang-ja' into feature/sidebar-config

* upstream/lang-ja:
  Migration > v-on-native-modifier-removed の翻訳を追従 (#251)
  Migration > Watch の翻訳を追従 (#250)
  Migration > Listeners Removed の翻訳を追従 (#248)

Author: naokie

src/.vuepress/config.js

@@ -193,7 +193,7 @@ const sidebar = {
         '/guide/migration/inline-template-attribute',
         '/guide/migration/key-attribute',
         '/guide/migration/keycode-modifiers',
-        // '/guide/migration/listeners-removed',
+        '/guide/migration/listeners-removed',
         // '/guide/migration/mount-changes',
         // '/guide/migration/props-data',
         '/guide/migration/props-default-this',
@@ -202,12 +202,12 @@ const sidebar = {
         '/guide/migration/suspense',
         '/guide/migration/transition',
         // '/guide/migration/transition-group',
-        // '/guide/migration/v-on-native-modifier-removed',
+        '/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/watch'
+        '/guide/migration/watch'
       ]
     },
   ],

src/guide/migration/listeners-removed.md

@@ -0,0 +1,74 @@
+---
+title: $listeners の削除
+badges:
+  - breaking
+---
+
+# `$listeners` の削除 <MigrationBadges :badges="$frontmatter.badges" />
+
+## 概要
+
+`$listeners` オブジェクトは Vue 3 で削除されました。イベントリスナは `$attrs` の一部になりました。
+
+```javascript
+{
+  text: 'this is an attribute',
+  onClose: () => console.log('close Event triggered')
+}
+```
+
+## 2.x での構文
+
+Vue 2 では、コンポーネントに渡された属性は `this.$attrs` で、イベントリスナは `this.$listeners` でアクセスできます。
+`inheritAttrs: false` と組み合わせることで、開発者はこれらの属性やリスナを、ルート要素ではなく他の要素に適用することができます:
+
+```html
+<template>
+  <label>
+    <input type="text" v-bind="$attrs" v-on="$listeners" />
+  </label>
+</template>
+<script>
+  export default {
+    inheritAttrs: false
+  }
+</script>
+```
+
+## 3.x での構文
+
+Vue 3 の仮想 DOM では、イベントリスナはプレフィックスに `on` がついた単なる属性になり、 `$attrs` オブジェクトの一部であるため、 `$listeners` は削除されました。
+
+```vue
+<template>
+  <label>
+    <input type="text" v-bind="$attrs" />
+  </label>
+</template>
+<script>
+export default {
+  inheritAttrs: false
+}
+</script>
+```
+
+もしこのコンポーネントが `id` 属性と `v-on:close` リスナを受け取った場合、 `$attrs` オブジェクトは次のようになります:
+
+```javascript
+{
+  id: 'my-input',
+  onClose: () => console.log('close Event triggered')
+}
+```
+
+## 移行の戦略
+
+`$listeners` の使用をすべて削除します。
+
+## 参照
+
+- [関連する RFC](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0031-attr-fallthrough.md)
+- [移行ガイド - `class` と `style` を含む `$attrs`](./attrs-includes-class-style.md)
+- [移行ガイド - Render 関数 API](./render-function-api.md)
+- [移行ガイド - 新しい Emits のオプション](./emits-option.md)
+- [移行ガイド - `.native` 修飾子の削除](./v-on-native-modifier-removed.md)

src/guide/migration/v-on-native-modifier-removed.md

@@ -0,0 +1,57 @@
+---
+title: v-on.native 修飾子の削除
+badges:
+  - breaking
+---
+
+# `v-on.native` 修飾子の削除 <MigrationBadges :badges="$frontmatter.badges" />
+
+## 概要
+
+`v-on` の `.native` 修飾子は削除されました。
+
+## 2.x での構文
+
+`v-on` でコンポーネントに渡されたイベントリスナは、デフォルトでは `this.$emit` でイベントを発行することでのみ発火されます。代わりにネイティブ DOM リスナを子コンポーネントのルート要素に追加するには、 `.native` 修飾子を使用できます:
+
+```html
+<my-component
+  v-on:close="handleComponentEvent"
+  v-on:click.native="handleNativeClickEvent"
+/>
+```
+
+## 3.x での構文
+
+`v-on` の `.native` 修飾子は削除されました。同時に、 [新しい `emits` オプション](./emits-option.md) によって、子要素が実際に発行するイベントを定義できるようになりました。
+
+その結果、 Vue は子コンポーネントの発行するイベントとして定義されて _いない_　すべてのイベントリスナを、子のルート要素のネイティブイベントリスナとして追加するようになりました（ただし `inheritAttrs: false` が子のオプションで設定されていない場合）。
+
+```html
+<my-component
+  v-on:close="handleComponentEvent"
+  v-on:click="handleNativeClickEvent"
+/>
+```
+
+`MyComponent.vue`
+
+```html
+<script>
+  export default {
+    emits: ['close']
+  }
+</script>
+```
+
+## 移行の戦略
+
+- `.native` 修飾子のすべてのインスタンスを削除します。
+- すべてのコンポーネントが、 `emits` オプションでイベントを記録するようにします。
+
+## 参照
+
+- [関連する RFC](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0031-attr-fallthrough.md#v-on-listener-fallthrough)
+- [移行ガイド - 新しい Emits のオプション](./emits-option.md)
+- [移行ガイド - `$listeners` の削除](./listeners-removed.md)
+- [移行ガイド - Render 関数 API](./render-function-api.md)

src/guide/migration/watch.md

@@ -0,0 +1,30 @@
+---
+title: 配列の監視
+badges:
+  - breaking
+---
+
+# {{ $frontmatter.title }} <MigrationBadges :badges="$frontmatter.badges" />
+
+## 概要
+
+- **破壊的変更**: 配列を監視している場合、コールバックは配列が置き換えられたときにのみ実行します。配列の変更で実行する必要がある場合は、 `deep` オプションを指定する必要があります。
+
+## 3.x の構文
+
+[`watch` オプション](/api/options-data.html#watch) を使って配列を監視する場合、コールバックは配列が置き換えられたときにのみ実行します。言い換えれば、 watch コールバックは配列の変更では実行されなくなります。配列の変更で実行するには、 `deep` オプションを指定する必要があります。
+
+```js
+watch: {
+  bookList: {
+    handler(val, oldVal) {
+      console.log('book list changed')
+    },
+    deep: true
+  },
+}
+```
+
+## 移行の戦略
+
+配列の変更を監視することに依存している場合は、 `deep` プロパティを追加して、コールバックが正しく実行されるようにします。