计算属性关键词: computed。 计算属性在处理一些复杂逻辑时是很有用的。 可以看下以下反转字符串的例子: 实例 1% e2 r2 n8 ?1 r& y: J: ^. O
- <div id="app"># A: x/ I7 b" g. ^" s" a( j, P
- {{ message.split('').reverse().join('') }}
- z/ I1 @$ v* O8 E% F& Q5 B/ v - </div>
复制代码实例 1 中模板变的很复杂起来,也不容易看懂理解。 接下来我们看看使用了计算属性的实例: 实例 2
9 t+ f5 a: ]5 y8 T; z) E! z- <div id="app">. F5 J3 X; |, r6 b
- <p>原始字符串: {{ message }}</p>9 e+ S7 o' S/ r5 G9 u0 a) r7 `8 N
- <p>计算后反转字符串: {{ reversedMessage }}</p>
1 B# w- T, X% [ - </div>& U* m. D( I2 e3 j
-
: V3 j N8 R* n - <script>% F7 @1 K% g2 n
- var vm = new Vue({
* s w; ]6 L( y' ]. h) C, f - el: '#app',
( D# i- z" T# ] d - data: {
- T6 A/ P+ C, W - message: 'Runoob!'
( X' D3 K6 ^) n0 Q - },
- J; K4 M/ j% d+ o2 K - computed: {' b/ f" j$ z0 z8 h% s
- // 计算属性的 getter U5 t/ S* d" I7 R8 R# n5 G F
- reversedMessage: function () {3 j# O8 H3 B& W# t, C/ u: s
- // `this` 指向 vm 实例; Z, d: m" `8 Y/ g! }9 T* T. p
- return this.message.split('').reverse().join('')
$ s, a4 \& ]2 L$ @8 N5 E - }" o: @( d2 n7 z7 S& h
- }
' p8 B! z* S* A) O - })% R& W$ S* q* Z& ~- r6 w5 n8 u: C# y
- </script>
复制代码实例 2 中声明了一个计算属性 reversedMessage 。 提供的函数将用作属性 vm.reversedMessage 的 getter 。 vm.reversedMessage 依赖于 vm.message,在 vm.message 发生改变时,vm.reversedMessage 也会更新。 computed vs methods我们可以使用 methods 来替代 computed,效果上两个都是一样的,但是 computed 是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值。而使用 methods ,在重新渲染的时候,函数总会重新调用执行。 实例 3! @4 i J! C0 Z; k5 ?( Y
- methods: {% y! W8 z' D/ M9 U) J! d. u2 z9 N
- reversedMessage2: function () {' ~* l. g" k, }0 {
- return this.message.split('').reverse().join('')
# i3 x) E5 J0 f' V& ? - }3 r) _+ P1 f$ N. N, K6 j
- }
复制代码可以说使用 computed 性能会更好,但是如果你不希望缓存,你可以使用 methods 属性。 computed settercomputed 属性默认只有 getter ,不过在需要时你也可以提供一个 setter : 实例 4' I) x6 S9 C, d" r u, B; U
- var vm = new Vue({7 P2 N$ H/ A C( N1 O
- el: '#app',
" d( M* O7 f- Z# t' W! j - data: {
' |, }0 ]; ?+ z+ {4 j" G - name: 'Google',
- h5 y7 _2 N$ g3 Y$ M - url: 'http://www.google.com'
1 p* A' i/ H+ t0 A8 w& V2 b! H - },8 p6 u0 H1 Q4 k% l* y _% M* ]7 z
- computed: {
4 k7 j# p8 l! L m. T' } - site: {
, D$ b6 U. v0 @6 b, h: ^/ q - // getter
- u8 k: W- G" x, E - get: function () {
( w1 T3 f: h. N8 E+ M5 x! v) j1 I - return this.name + ' ' + this.url
& P9 z' p, h0 n. W - },
& b2 R# G3 [9 {8 J4 |8 F9 W8 y - // setter, M7 T/ v! l( ^' }2 q, ^3 u. P
- set: function (newValue) {$ E& o1 U J5 w1 I" _! p
- var names = newValue.split(' ')' y5 D0 E; g* d& `4 M# n* k
- this.name = names[0]5 a# s* T8 F _% ]6 G9 Y1 ?" P
- this.url = names[names.length - 1]
& D. s4 M; t6 j# Z2 W. B - }0 ^, j3 r2 h% m! v! G( U$ g
- }3 q5 V) l( j) M0 h0 ]
- }& |4 F. q2 M5 r5 a$ S' f
- })6 D% E+ r: M% M+ p6 g+ g
- // 调用 setter, vm.name 和 vm.url 也会被对应更新8 h1 x) ^; i2 k
- vm.site = '百度教程 http://www.baidu.com';8 C4 [) w9 ?- R7 r% ~5 `. F+ E
- document.write('name: ' + vm.name);9 Z/ R m( V, M* Y' {
- document.write('<br>');
7 p5 G6 ?+ \' |) o P$ a - document.write('url: ' + vm.url);
复制代码 从实例运行结果看在运行 vm.site = '百度教程 http://www.baidu.com'; 时,setter 会被调用, vm.name 和 vm.url 也会被对应更新。
1 D4 @9 M( o p2 |9 L" z
, v, ]2 ~6 X+ E) Z# h5 c8 p: _
0 I0 E# ^. H1 j8 ?' _* h
" k5 b% K2 w- |* A' U5 |
2 l" K) O+ F2 h6 i
3 |5 P" c% @( x% g1 v+ O
|