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: source/guide/computed.md
+62-1Lines changed: 62 additions & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -5,4 +5,65 @@ order: 8
5
5
6
6
# {{title}}
7
7
8
-
Vue.js' inline expressions are very convenient, but the best use cases for them are simple boolean operations or string concatenations. For more complicated logic, you should use Computed Properties.
8
+
Vue.js' inline expressions are very convenient, but the best use cases for them are simple boolean operations or string concatenations. For more complicated logic, you should use **computed properties**.
9
+
10
+
In Vue.js, you define computed properties with the `computed` option:
11
+
12
+
```js
13
+
var demo =newVue({
14
+
data: {
15
+
firstName:'Foo',
16
+
lastName:'Bar'
17
+
},
18
+
computed: {
19
+
fullName: {
20
+
// the getter should return the desired value
21
+
$get:function () {
22
+
returnthis.firstName+''+this.lastName
23
+
},
24
+
// the setter is optional
25
+
$set:function (newValue) {
26
+
var names =newValue.split('')
27
+
this.firstName= names[0]
28
+
this.lastName= names[names.length-1]
29
+
}
30
+
}
31
+
}
32
+
})
33
+
demo.fullName// 'Foo Bar'
34
+
```
35
+
36
+
A computed property is essentially a property defined with getter/setter functions. You can use a computed property just like a normal property, but when you access it, you get the value returned by the getter function; when you change its value, you trigger the setter function passing in the new value as its argument.
37
+
38
+
## Dependency Collection Gotcha
39
+
40
+
Like inline expressions, Vue.js automatically collects dependencies for computed properties and refreshes them when their dependencies change. There's one thing to keep in mind though: since Vue.js collects dependencies by monitoring which properties are accessed inside a getter, you need to be careful when there is conditional logic within your getters. Consider this example:
41
+
42
+
```js
43
+
status: {
44
+
$get:function () {
45
+
returnthis.validated
46
+
?this.okMsg
47
+
:this.errMsg
48
+
}
49
+
}
50
+
```
51
+
52
+
If `validated` is true in the beginning, then `errMsg` will not be accessed and therefore not collected as a dependency. Vice-versa for `okMsg`. To get around this you can simply manually access potentially unreachable properties in your getter:
53
+
54
+
```
55
+
status: {
56
+
$get: function () {
57
+
// access dependencies explicitly
58
+
this.okMsg
59
+
this.errMsg
60
+
return this.validated
61
+
? this.okMsg
62
+
: this.errMsg
63
+
}
64
+
}
65
+
```
66
+
67
+
You don't need to worry about this in inline expressions because Vue.js' expression parser takes care of it for you.
0 commit comments