See the Pen @@ -76,22 +76,22 @@ Result:
-Here we have declared a computed property `publishedBooksMessage`. +ここでは `publishedBooksMessage` という算出プロパティを宣言しています。 -Try to change the value of `books` array in the application `data` and you will see how `publishedBooksMessage` is changing accordingly. +このアプリケーションの `data` にある `books` 配列の値を変更してみると、それに応じて `publishedBooksMessage` がどのように変わるか分かるでしょう。 -You can data-bind to computed properties in templates just like a normal property. Vue is aware that `vm.publishedBooksMessage` depends on `vm.author.books`, so it will update any bindings that depend on `vm.publishedBooksMessage` when `vm.author.books` changes. And the best part is that we've created this dependency relationship declaratively: the computed getter function has no side effects, which makes it easier to test and understand. +通常のプロパティと同じように、テンプレート内で算出プロパティにデータバインドできます。Vue は `vm.publishedBooksMessage` が `vm.author.books` に依存していると分かっているので、`vm.author.books` が変更されると `vm.publishedBooksMessage` に依存するバインディングを更新します。そして、一番よいのは、この依存関係を宣言的に作成していることです。算出 getter 関数には副作用がないので、テストや理解するのが容易になります。 -### Computed Caching vs Methods +### 算出プロパティ vs メソッド -You may have noticed we can achieve the same result by invoking a method in the expression: +式の中でメソッドを呼び出せば同じことができると気づいたかもしれません: ```html{{ calculateBooksMessage() }}
``` ```js -// in component +// コンポーネントの中 methods: { calculateBooksMessage() { return this.author.books.length > 0 ? 'Yes' : 'No' @@ -99,9 +99,9 @@ methods: { } ``` -Instead of a computed property, we can define the same function as a method. For the end result, the two approaches are indeed exactly the same. However, the difference is that **computed properties are cached based on their reactive dependencies.** A computed property will only re-evaluate when some of its reactive dependencies have changed. This means as long as `author.books` has not changed, multiple access to the `publishedBooksMessage` computed property will immediately return the previously computed result without having to run the function again. +同じ関数を算出プロパティではなくメソッドとして定義することもできます。結果だけ見れば、この2つのアプローチはまったく同じになりますが、**算出プロパティはリアクティブな依存関係に基づいてキャッシュされる**という違いがあります。算出プロパティはリアクティブな依存関係の一部が変更された場合にのみ再評価されるのです。つまり、`author.books`が変更されなければ、算出プロパティの `publishedBooksMessage` に複数回アクセスしても関数は再実行されず、前回計算した結果がすぐに返されます。 -This also means the following computed property will never update, because `Date.now()` is not a reactive dependency: +以下の算出プロパティは `Date.now()` がリアクティブな依存関係ではないので、一度も更新されないことになります: ```js computed: { @@ -111,23 +111,23 @@ computed: { } ``` -In comparison, a method invocation will **always** run the function whenever a re-render happens. +それに対してメソッドは、再レンダリングが起こるたびに**常に**関数を実行します。 -Why do we need caching? Imagine we have an expensive computed property `list`, which requires looping through a huge array and doing a lot of computations. Then we may have other computed properties that in turn depend on `list`. Without caching, we would be executing `list`’s getter many more times than necessary! In cases where you do not want caching, use a `method` instead. +どうしてキャッシングが必要なのでしょうか？ 巨大な配列をループして、たくさんの計算を必要とする算出プロパティ `list` があるとします。また、`list` に依存している別の算出プロパティがあるかも知れません。キャッシングがなければ、`list` の getter 関数を必要以上に何度も実行することになってしまいます。キャッシングをしたくない場合は、代わりに `method` を使用してください。 -### Computed Setter +### 算出 Setter 関数 -Computed properties are by default getter-only, but you can also provide a setter when you need it: +算出プロパティはデフォルトでは getter 関数のみですが、必要に応じて setter 関数を設定することもできます: ```js // ... computed: { fullName: { - // getter + // getter 関数 get() { return this.firstName + ' ' + this.lastName }, - // setter + // setter 関数 set(newValue) { const names = newValue.split(' ') this.firstName = names[0] @@ -138,13 +138,13 @@ computed: { // ... ``` -Now when you run `vm.fullName = 'John Doe'`, the setter will be invoked and `vm.firstName` and `vm.lastName` will be updated accordingly. +この状態で `vm.fullName = 'John Doe'` を実行すると setter 関数が呼び出され、その結果 `vm.firstName` と `vm.lastName` が更新されます。 -## Watchers +## ウォッチャ -While computed properties are more appropriate in most cases, there are times when a custom watcher is necessary. That's why Vue provides a more generic way to react to data changes through the `watch` option. This is most useful when you want to perform asynchronous or expensive operations in response to changing data. +ほとんどの場合、算出プロパティの方が適切ですが、カスタムウォッチャが必要な場合もあります。そのため Vue は、データの変更に反応するためのより汎用的な方法を、`watch` オプションによって提供しています。これはデータを変更するのに応じて非同期処理や重い処理を実行したい場合に最も便利です。 -For example: +例: ```htmlSee the Pen @@ -204,13 +204,13 @@ Result:
-In this case, using the `watch` option allows us to perform an asynchronous operation (accessing an API) and sets a condition for performing this operation. None of that would be possible with a computed property. +このケースでは `watch` オプションを使用することで、非同期処理（API へのアクセス）の実行と、その処理を実行する条件を設定できています。このようなことは算出プロパティではできません。 -In addition to the `watch` option, you can also use the imperative [vm.\$watch API](../api/instance-methods.html#watch). +`watch` オプションに加え、命令的な [vm.\$watch API](../api/instance-methods.html#watch) を使うこともできます。 -### Computed vs Watched Property +### 算出プロパティ vs 監視プロパティ -Vue does provide a more generic way to observe and react to data changes on a current active instance: **watch properties**. When you have some data that needs to change based on some other data, it is tempting to overuse `watch` - especially if you are coming from an AngularJS background. However, it is often a better idea to use a computed property rather than an imperative `watch` callback. Consider this example: +Vue は現在のアクティブなインスタンスでのデータの変更を観察して反応するための、より汎用的な方法: **監視プロパティ(watched property)** を提供します。他のデータに基づいて変更しなければならないデータがある場合（AngularJS をやっていた人だとなおさら）、`watch` を使いすぎてしまいがちです。しかし、たいていの場合は命令的な `watch` のコールバックよりも算出プロパティを使うのがベターです。次の例を考えてみましょう: ```html