From af8b4fb9f9be678cd1871f4477d4c32422719419 Mon Sep 17 00:00:00 2001 From: aster-mnch Date: Sun, 9 Jun 2024 19:41:22 +0900 Subject: [PATCH 1/5] feat: content/1.vue/3.reactivity-2 --- .../3.reactivity-2/.template/files/app.vue | 38 +++++++++++++---- .../.template/solutions/app.vue | 42 ++++++++++++------- content/1.vue/3.reactivity-2/index.md | 41 +++++++++++++++++- 3 files changed, 97 insertions(+), 24 deletions(-) diff --git a/content/1.vue/3.reactivity-2/.template/files/app.vue b/content/1.vue/3.reactivity-2/.template/files/app.vue index b552f03..fd5238b 100644 --- a/content/1.vue/3.reactivity-2/.template/files/app.vue +++ b/content/1.vue/3.reactivity-2/.template/files/app.vue @@ -1,18 +1,40 @@ - diff --git a/content/1.vue/3.reactivity-2/.template/solutions/app.vue b/content/1.vue/3.reactivity-2/.template/solutions/app.vue index 442cbdf..6949aa1 100644 --- a/content/1.vue/3.reactivity-2/.template/solutions/app.vue +++ b/content/1.vue/3.reactivity-2/.template/solutions/app.vue @@ -1,25 +1,39 @@ - diff --git a/content/1.vue/3.reactivity-2/index.md b/content/1.vue/3.reactivity-2/index.md index 0f7928d..0b63097 100644 --- a/content/1.vue/3.reactivity-2/index.md +++ b/content/1.vue/3.reactivity-2/index.md @@ -4,6 +4,43 @@ ogImage: true # Reactivity Part 2 -In the previous section, we learned about `ref` and `computed`. In this section, we will learn about `reactive` and `watch` that fullfills our basic needs for reactivity. +前章で `ref` と `computed` を使った基本的なデータバインディングを学びました。本章では、`reactive` と `watch` について学びましょう。この章で基本的なリアクティビティシステムをマスターできます！ -// TODO: +- [`reactive()`](https://ja.vuejs.org/api/reactivity-core#reactive) はオブジェクト全体をリアクティブなデータとして扱うことができます。複数のプロパティを持つオブジェクトを管理できます。 + +- [`watch()`](https://ja.vuejs.org/api/reactivity-core#watch) はリアクティブなデータの変化を監視し、変化があったときに特定の処理を実行することができます。 + +`reactive` で宣言された値は、JavaScript の[プロキシ](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Proxy)として返ってくるため、以下のように通常のオブジェクトと同じように操作することができます。 + +```ts +const counter = reactive({ count: 0 }) +counter.count++ // .value は不要 +console.log(counter.count) // -> 1 +``` + +::note +**注意**: よくある間違いとして、`ref` はプリミティブな値のみに対応し、オブジェクトには `reactive` を使うという誤解があります。実際は `ref` でも `ref({ count: 0 })` のようにオブジェクトをリアクティブな値として宣言することができます。 +また、`reactive` には[いくつかの制限事項がある](https://ja.vuejs.org/guide/essentials/reactivity-fundamentals#limitations-of-reactive)ため、リアクティブな状態を宣言する際は基本的に `ref` を用いるのが推奨されます。 +:: + +`watch` は `computed` と同様にリアクティブ値の変化に応じて作用しますが、主に `console.log` や `fetch` のような副作用をリアクティブに実行するときに使います。 +プレイグラウンドでは、サーバーで管理している TODO アイテムを表示していますが、表示する ID が変化したときに新しいアイテムを取得するために `watch` による監視をしています。 + +`watch` に関する詳しい説明は[ウォッチャーガイド](https://ja.vuejs.org/guide/essentials/watchers)を参照してください。 + +## チャレンジ問題 + +今のプレイグラウンドは、TODO アイテムに関するデータを `todoId` と `todoData` の二つのリアクティブ値として管理しています。これらを一つの `todoData` にまとめましょう。 +これらのステップを実行することで、`reactive` と `watch` の理解を深めることができるのでぜひ挑戦してみてください！ + +1. `todoData` に `id` プロパティを追加し、`todoId` を消しましょう。 +2. エラー箇所にしたがって、`todoId` と書いてある箇所を `todoData.id` に変えましょう。 + - これで `watch` 以外のエラーは解消されるはずです。 + - エラーがまだ出る場合は `.value` の有無に注意しましょう！ +3. `watch` の第一引数をゲッター関数に変えましょう。 + - `todoData.id` のままだと数値を渡していることになるため、`watch` が変化を補足できません。 + +もし手詰まりになったら、解決策を確認するためのボタンをクリックして、ヒントを得ることができます。 +:ButtonShowSolution{.bg-faded.px4.py2.rounded.border.border-base.hover:bg-active.hover:text-primary.hover:border-primary:50} + +ここまでで Vue のリアクティビティシステムの基礎について学びました。次のステップで、Vue の強力な機能の一つである「Composition API」について学びましょう！ From ea061f8a5e3ab124ba04aab02dd0ceefa52f42a3 Mon Sep 17 00:00:00 2001 From: aster-mnch Date: Sat, 15 Jun 2024 09:52:45 +0900 Subject: [PATCH 2/5] fix: typo --- content/1.vue/3.reactivity-2/.template/files/app.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/1.vue/3.reactivity-2/.template/files/app.vue b/content/1.vue/3.reactivity-2/.template/files/app.vue index fd5238b..536c496 100644 --- a/content/1.vue/3.reactivity-2/.template/files/app.vue +++ b/content/1.vue/3.reactivity-2/.template/files/app.vue @@ -13,7 +13,7 @@ function increment() { async function fetchTodo() { todoData.loading = true try { - const res = await fetch(`https://jsonplaceholder.typicode.com/comments/${todoId.value}`) + const res = await fetch(`https://jsonplaceholder.typicode.com/todos/${todoId.value}`) todoData.data = await res.json() } finally { From f90ae5dd15b9eadf060a911f31aaee84a5fe4c73 Mon Sep 17 00:00:00 2001 From: aster-mnch Date: Sat, 15 Jun 2024 09:53:10 +0900 Subject: [PATCH 3/5] fix: prevent race condition https://github.com/vuejs-jp/learn.nuxt.com/pull/30#discussion_r1632238317 --- content/1.vue/3.reactivity-2/.template/files/app.vue | 2 +- content/1.vue/3.reactivity-2/.template/solutions/app.vue | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/content/1.vue/3.reactivity-2/.template/files/app.vue b/content/1.vue/3.reactivity-2/.template/files/app.vue index 536c496..3dd31b2 100644 --- a/content/1.vue/3.reactivity-2/.template/files/app.vue +++ b/content/1.vue/3.reactivity-2/.template/files/app.vue @@ -29,7 +29,7 @@ fetchTodo()