You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/guide/computed.md
+40-40Lines changed: 40 additions & 40 deletions
Original file line number
Diff line number
Diff line change
@@ -1,8 +1,8 @@
1
-
# Computed Properties and Watchers
1
+
# 算出プロパティとウォッチャ
2
2
3
-
## Computed Properties
3
+
## 算出プロパティ
4
4
5
-
In-template expressions are very convenient, but they are meant for simple operations. Putting too much logic in your templates can make them bloated and hard to maintain. For example, if we have an object with a nested array:
And we want to display different messages depending on if `author`already has some books or not
24
+
`author`が本を持っているかどうかによって違うメッセージを表示しようとしています。
25
25
26
26
```html
27
27
<divid="computed-basics">
@@ -30,11 +30,11 @@ And we want to display different messages depending on if `author` already has s
30
30
</div>
31
31
```
32
32
33
-
At this point, the template is no longer simple and declarative. You have to look at it for a second before realizing that it performs a calculation depending on `author.books`. The problem is made worse when you want to include this calculation in your template more than once.
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.
You may have noticed we can achieve the same result by invoking a method in the expression:
87
+
式の中でメソッドを呼び出せば同じことができると気づいたかもしれません:
88
88
89
89
```html
90
90
<p>{{ calculateBooksMessage() }}</p>
91
91
```
92
92
93
93
```js
94
-
//in component
94
+
//コンポーネントの中
95
95
methods: {
96
96
calculateBooksMessage() {
97
97
returnthis.author.books.length>0?'Yes':'No'
98
98
}
99
99
}
100
100
```
101
101
102
-
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.
In comparison, a method invocation will **always** run the function whenever a re-render happens.
114
+
それに対してメソッドは、再レンダリングが起こるたびに**常に**関数を実行します。
115
115
116
-
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.
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.
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.
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:
0 commit comments