File tree Expand file tree Collapse file tree 1 file changed +3
-3
lines changed Expand file tree Collapse file tree 1 file changed +3
-3
lines changed Original file line number Diff line number Diff line change @@ -32,7 +32,7 @@ Vue.createApp({
32
32
33
33
これだと、テンプレートはもうシンプルでも宣言的でもありません。` author.books ` を元に計算していると分かるまで少し時間がかかります。この計算を何回もテンプレートに含めたい場合、問題はさらに悪化します。
34
34
35
- そのため、リアクティブなデータを含む複雑なロジックには** 算出プロパティ** を使いましょう 。
35
+ そのため、リアクティブなデータを含む複雑なロジックには** 算出プロパティ** を使うべきです 。
36
36
37
37
### 基本的な例
38
38
@@ -80,7 +80,7 @@ Vue.createApp({
80
80
81
81
このアプリケーションの ` data ` にある ` books ` 配列の値を変更してみると、それに応じて ` publishedBooksMessage ` がどのように変わるか分かるでしょう。
82
82
83
- 通常のプロパティと同じように、テンプレート内で算出プロパティにデータバインドできます。Vue は ` vm.publishedBooksMessage ` が ` vm.author.books ` に依存していると分かっているので、` vm.author.books ` が変更されると ` vm.publishedBooksMessage ` に依存するバインディングを更新します。また、この依存関係を宣言的に作成しているのが最高です: 算出 getter 関数には副作用がないので、テストや理解するのが容易になります。
83
+ 通常のプロパティと同じように、テンプレート内で算出プロパティにデータバインドできます。Vue は ` vm.publishedBooksMessage ` が ` vm.author.books ` に依存していると分かっているので、` vm.author.books ` が変更されると ` vm.publishedBooksMessage ` に依存するバインディングを更新します。そして、一番よいのは、この依存関係を宣言的に作成していることです。 算出 getter 関数には副作用がないので、テストや理解するのが容易になります。
84
84
85
85
### 算出プロパティ vs メソッド
86
86
@@ -101,7 +101,7 @@ methods: {
101
101
102
102
同じ関数を算出プロパティではなくメソッドとして定義することもできます。結果だけ見れば、この2つのアプローチはまったく同じになりますが、** 算出プロパティはリアクティブな依存関係に基づいてキャッシュされる** という違いがあります。算出プロパティはリアクティブな依存関係の一部が変更された場合にのみ再評価されるのです。つまり、` author.books ` が変更されなければ、算出プロパティの ` publishedBooksMessage ` に複数回アクセスしても関数は再実行されず、前回計算した結果がすぐに返されます。
103
103
104
- 下の算出プロパティは ` Date.now() ` がリアクティブな依存関係ではないので、一度も更新されないことになります:
104
+ 以下の算出プロパティは ` Date.now() ` がリアクティブな依存関係ではないので、一度も更新されないことになります:
105
105
106
106
``` js
107
107
computed: {
You can’t perform that action at this time.
0 commit comments