计算属性关键词: computed。 计算属性在处理一些复杂逻辑时是很有用的。 可以看下以下反转字符串的例子: 实例 1/ o' g/ G/ u9 n1 K" ~2 V+ o
- <div id="app">
. K& l$ t6 Z% p& e# T1 X) x - {{ message.split('').reverse().join('') }}
8 k. w) ^, a2 [+ |# G8 v3 s$ W - </div>
复制代码实例 1 中模板变的很复杂起来,也不容易看懂理解。 接下来我们看看使用了计算属性的实例: 实例 2* ^$ ~# q+ Y1 }9 f8 `; J- _2 x) h2 n* X
- <div id="app">& m/ F1 S0 N3 L
- <p>原始字符串: {{ message }}</p>
5 [: {$ J# c% s, E - <p>计算后反转字符串: {{ reversedMessage }}</p>
3 e( E$ H5 s& J - </div>
/ ?9 O8 U2 |; ^& X( N, ?7 v7 Q - 2 Y5 V' K5 H2 n8 N/ T% ^
- <script>6 A4 ^5 [% R7 P, w
- var vm = new Vue({$ r% B: a! n* x5 D7 U) v
- el: '#app',
" \6 E: n+ u: {2 x - data: {( q* {# I* G$ z Q
- message: 'Runoob!'
- p4 o& U8 o+ v5 l# M, V - },6 x, h0 `' Z! V8 ~
- computed: {
+ i# g; g' w$ i; j, W - // 计算属性的 getter
( \: j H' h9 g9 y - reversedMessage: function () {
- p' k# D5 l' I3 l - // `this` 指向 vm 实例# q+ U1 P0 f k( b( Z
- return this.message.split('').reverse().join('')
( l7 o' Q2 y4 O0 q - }
# G; `9 J7 t. f8 X3 }( }4 x; N, i7 Y - }* T) @: \; x& P6 |3 e
- })
# k1 y( v% i7 p% `' r - </script>
复制代码实例 2 中声明了一个计算属性 reversedMessage 。 提供的函数将用作属性 vm.reversedMessage 的 getter 。 vm.reversedMessage 依赖于 vm.message,在 vm.message 发生改变时,vm.reversedMessage 也会更新。 computed vs methods我们可以使用 methods 来替代 computed,效果上两个都是一样的,但是 computed 是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值。而使用 methods ,在重新渲染的时候,函数总会重新调用执行。 实例 39 a! Z% ^+ K2 o$ z/ M: M3 N
- methods: {2 n( g6 Y! t. x
- reversedMessage2: function () {3 }% v8 w% w& S* C
- return this.message.split('').reverse().join('')
) `' j0 O5 _0 d1 U6 j* V - }
q2 `; V2 \1 y" t/ M" N( h0 ]( f - }
复制代码可以说使用 computed 性能会更好,但是如果你不希望缓存,你可以使用 methods 属性。 computed settercomputed 属性默认只有 getter ,不过在需要时你也可以提供一个 setter : 实例 4
e+ W9 l+ b3 w3 Q5 B- var vm = new Vue({
' x8 I, b6 R" ?+ R - el: '#app',
2 ]1 T. c+ y3 X6 g1 |9 t8 V - data: {/ b, _/ A6 e" @) u' |* g2 N$ t
- name: 'Google',
$ _% j6 l3 y' s, {9 T - url: 'http://www.google.com'% f. V* \; S! N) d; r2 Y1 B
- },
( A$ K, m o( N' N6 v - computed: {- W* a6 }1 ~1 d6 x$ ?. l. L: G
- site: {
- @3 `9 [4 r$ d& e( ? - // getter
7 N' s$ N9 {1 k - get: function () {0 `" G0 F, U. t4 S; a
- return this.name + ' ' + this.url
, a& ~' w) R0 L$ g, x6 J! l3 } - },
. Q2 t" F: ~ [) D - // setter
- q% r/ ]& d2 R/ ? - set: function (newValue) {4 R/ r% x- a' B: z' i- O0 O+ U
- var names = newValue.split(' ')
8 c2 A! t) \& Y( J: J( b7 w/ M - this.name = names[0]
4 ?9 E" d1 A" Y: D7 x w - this.url = names[names.length - 1]
2 Z& t, l. o1 x2 q) ]8 i# G - }
9 O( u) |& }/ e/ {5 ]; i - }
2 D- w0 y7 j6 O) @ - }
( Q8 o, G2 ~5 |0 q5 @ - })- j7 N: l& M1 D/ X) N
- // 调用 setter, vm.name 和 vm.url 也会被对应更新
) k# S _0 {* _1 @ - vm.site = '百度教程 http://www.baidu.com';* G. z! Q+ m% `, y( r% z& W% E
- document.write('name: ' + vm.name);' w# Z' @: t4 w# I& Y* L
- document.write('<br>');3 u- x& C* D# K- k0 H/ a
- document.write('url: ' + vm.url);
复制代码 从实例运行结果看在运行 vm.site = '百度教程 http://www.baidu.com'; 时,setter 会被调用, vm.name 和 vm.url 也会被对应更新。
" _% I/ E2 o$ ~ w6 y# n: a8 e7 p
0 b- i! ]9 n8 ?9 i! X
2 t+ z- Z7 q4 ], s
( R0 E, i% g9 D, m- w# Y
3 _3 X6 Q! J) S- Y; z# L1 G r
+ d7 _7 g- N; ^# X+ Q |