From 9eae793e7b20bd58a8677db15bdf165e17f74521 Mon Sep 17 00:00:00 2001 From: Naoki Endoh Date: Wed, 14 Apr 2021 00:12:53 +0900 Subject: [PATCH 1/3] feat: add migration guide > watch --- src/guide/migration/watch.md | 30 ++++++++++++++++++++++++++++++ 1 file changed, 30 insertions(+) create mode 100644 src/guide/migration/watch.md diff --git a/src/guide/migration/watch.md b/src/guide/migration/watch.md new file mode 100644 index 00000000..3a6f5795 --- /dev/null +++ b/src/guide/migration/watch.md @@ -0,0 +1,30 @@ +--- +title: Watch on Arrays +badges: + - breaking +--- + +# {{ $frontmatter.title }} + +## Overview + +- **BREAKING**: 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. + +## 3.x Syntax + +When using [the `watch` option](/api/options-data.html#watch) to watch an array, the callback will only trigger when the array is replaced. In other words, the watch callback will no longer be triggered on array mutation. To trigger on mutation, the `deep` option must be specified. + +```js +watch: { + bookList: { + handler(val, oldVal) { + console.log('book list changed') + }, + deep: true + }, +} +``` + +## Migration Strategy + +If you rely on watching array mutations, add the `deep` property to ensure that your callback is triggered correctly. From 39fe7ba94307c1f7413664d2e9943e6a93528152 Mon Sep 17 00:00:00 2001 From: Naoki Endoh Date: Wed, 14 Apr 2021 00:14:50 +0900 Subject: [PATCH 2/3] feat: add migration watch link --- src/.vuepress/config.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) 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' ] }, { From 8e6d82c86a42c2de9b14b5bec1223ef86737fe9c Mon Sep 17 00:00:00 2001 From: Naoki Endoh Date: Wed, 14 Apr 2021 00:16:06 +0900 Subject: [PATCH 3/3] docs: translate migration guide > watch --- src/guide/migration/watch.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/guide/migration/watch.md b/src/guide/migration/watch.md index 3a6f5795..7f703957 100644 --- a/src/guide/migration/watch.md +++ b/src/guide/migration/watch.md @@ -1,18 +1,18 @@ --- -title: Watch on Arrays +title: 配列の監視 badges: - breaking --- # {{ $frontmatter.title }} -## Overview +## 概要 -- **BREAKING**: 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. +- **破壊的変更**: 配列を監視している場合、コールバックは配列が置き換えられたときにのみ実行します。配列の変更で実行する必要がある場合は、 `deep` オプションを指定する必要があります。 -## 3.x Syntax +## 3.x の構文 -When using [the `watch` option](/api/options-data.html#watch) to watch an array, the callback will only trigger when the array is replaced. In other words, the watch callback will no longer be triggered on array mutation. To trigger on mutation, the `deep` option must be specified. +[`watch` オプション](/api/options-data.html#watch) を使って配列を監視する場合、コールバックは配列が置き換えられたときにのみ実行します。言い換えれば、 watch コールバックは配列の変更では実行されなくなります。配列の変更で実行するには、 `deep` オプションを指定する必要があります。 ```js watch: { @@ -25,6 +25,6 @@ watch: { } ``` -## Migration Strategy +## 移行の戦略 -If you rely on watching array mutations, add the `deep` property to ensure that your callback is triggered correctly. +配列の変更を監視することに依存している場合は、 `deep` プロパティを追加して、コールバックが正しく実行されるようにします。