diff --git a/src/.vuepress/config.js b/src/.vuepress/config.js index d3449d63..4f6cf75a 100644 --- a/src/.vuepress/config.js +++ b/src/.vuepress/config.js @@ -134,7 +134,8 @@ const sidebar = { 'migration/transition', 'migration/v-if-v-for', 'migration/v-model', - 'migration/v-bind' + 'migration/v-bind', + 'migration/watch' ] }, { diff --git a/src/guide/migration/watch.md b/src/guide/migration/watch.md new file mode 100644 index 00000000..7f703957 --- /dev/null +++ b/src/guide/migration/watch.md @@ -0,0 +1,30 @@ +--- +title: 配列の監視 +badges: + - breaking +--- + +# {{ $frontmatter.title }} + +## 概要 + +- **破壊的変更**: 配列を監視している場合、コールバックは配列が置き換えられたときにのみ実行します。配列の変更で実行する必要がある場合は、 `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` プロパティを追加して、コールバックが正しく実行されるようにします。