计算属性关键词: computed。 计算属性在处理一些复杂逻辑时是很有用的。 可以看下以下反转字符串的例子: 实例 15 u6 W; Z5 E W e3 ?1 H4 b
- <div id="app">; s" I: R. I' D7 B( j
- {{ message.split('').reverse().join('') }}) s; {" p3 \- W# K0 Q0 p4 L- H% \5 E
- </div>
复制代码实例 1 中模板变的很复杂起来,也不容易看懂理解。 接下来我们看看使用了计算属性的实例: 实例 28 }: a3 ?/ d4 Y4 ^+ C
- <div id="app">% |3 v9 |1 o: y# l. V
- <p>原始字符串: {{ message }}</p>
/ p' T I5 u* Q$ j1 W/ P - <p>计算后反转字符串: {{ reversedMessage }}</p>
8 n: X S U. ~% o$ b - </div>
n7 J6 ^% \0 S! \ -
0 x- X+ W6 g0 i - <script>2 H6 d6 W3 m5 x9 x- P) d
- var vm = new Vue({
- d9 K, Z4 X" X. ^+ e4 l - el: '#app',
8 F* O w% c3 t - data: {" \8 j4 c# b3 u: o; q) l1 s3 C7 T
- message: 'Runoob!'
" \- i) _6 P6 E5 o; T - },
! U- P8 J: _3 J& g$ U. \& S - computed: {
) s1 R) Z2 B) }4 ?# _ - // 计算属性的 getter4 m' E5 n: \+ }* {
- reversedMessage: function () {- C4 l7 K) f5 Q& P" ^
- // `this` 指向 vm 实例4 n9 L W3 E' q" Y3 t
- return this.message.split('').reverse().join('')8 ?- g" q- d/ o# g
- }
. {1 M6 h6 y: D - }
6 `8 {7 y3 H0 f4 l% w - })0 d' W d) t- @, ~
- </script>
复制代码实例 2 中声明了一个计算属性 reversedMessage 。 提供的函数将用作属性 vm.reversedMessage 的 getter 。 vm.reversedMessage 依赖于 vm.message,在 vm.message 发生改变时,vm.reversedMessage 也会更新。 computed vs methods我们可以使用 methods 来替代 computed,效果上两个都是一样的,但是 computed 是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值。而使用 methods ,在重新渲染的时候,函数总会重新调用执行。 实例 39 n& k/ C% z$ `) k
- methods: {
: P* U! O+ l/ _ - reversedMessage2: function () {
1 Y7 O# T* B2 Z - return this.message.split('').reverse().join('')3 O, z4 ]6 q& N3 b; `
- }
7 G0 `: L H; `- F1 ? - }
复制代码可以说使用 computed 性能会更好,但是如果你不希望缓存,你可以使用 methods 属性。 computed settercomputed 属性默认只有 getter ,不过在需要时你也可以提供一个 setter : 实例 49 U, T9 f% l7 E1 j' o$ J2 T
- var vm = new Vue({5 |) r, A/ I! J$ q+ m: ?
- el: '#app',7 _$ p. N4 z: m/ @3 r% }
- data: {
. s7 i- k: Z7 K6 K" \4 }8 ]' U - name: 'Google',( Q" d! @- y: C2 o# n& P% x) |$ k t" i
- url: 'http://www.google.com'' ^% n3 Z9 V2 L8 d0 R) V
- },
1 Z: R3 [9 G- \" i2 h- J - computed: {* R1 h' n; S* u( e( S
- site: {
6 @5 ~5 W0 ]0 _, _9 |8 t- ]3 G - // getter
1 c4 W) I: j8 M! A2 {. t - get: function () {+ z. y7 H+ Y2 e7 E9 [4 ~
- return this.name + ' ' + this.url3 e( K/ y( K: t/ ]$ Y6 ^
- },
! r( f) `5 z: z' o" R) m - // setter( Z8 Z! c( x8 X/ B A
- set: function (newValue) {/ ?3 K, U+ o2 g. n+ m- z* m
- var names = newValue.split(' ')0 Q/ r1 O- D$ u; D4 z& x/ R
- this.name = names[0]; V+ v: t9 g+ h# ]" @/ \& o! y
- this.url = names[names.length - 1], Y& }3 Q( j$ }' U
- }" E, r/ B; C0 W/ {: _" w
- }
( H1 }: E0 b2 ~% l' \ - }
7 S' h* L' _& z/ @! Y3 _ { - })2 B& |- z2 b3 V0 O
- // 调用 setter, vm.name 和 vm.url 也会被对应更新: k s. O+ B" m3 L+ `
- vm.site = '百度教程 http://www.baidu.com';: }& A# n& ]* K: m
- document.write('name: ' + vm.name);- r* V6 z; C$ w& Y4 Y$ Z6 B% w
- document.write('<br>');8 X: n. a. s* _
- document.write('url: ' + vm.url);
复制代码 从实例运行结果看在运行 vm.site = '百度教程 http://www.baidu.com'; 时,setter 会被调用, vm.name 和 vm.url 也会被对应更新。
7 w' Z& z- {+ b$ L6 M
! g6 i$ W! n& Q3 W$ f; X
4 C* R3 t4 G7 Y- ~
0 \& s$ p* c0 L D. H: n, e7 f; k; X6 S9 V" m
0 Y1 C. Q' z* ~) T+ p, f |