计算属性关键词: computed。 计算属性在处理一些复杂逻辑时是很有用的。 可以看下以下反转字符串的例子: 实例 1
+ i% i/ T* O6 q# y$ i( t/ L8 s; r- <div id="app">
' K0 i: o" T# i# }- k - {{ message.split('').reverse().join('') }}
y; f* _: O# c: w9 u - </div>
复制代码实例 1 中模板变的很复杂起来,也不容易看懂理解。 接下来我们看看使用了计算属性的实例: 实例 2$ _4 F4 ^1 m$ z3 ^, Q9 s
- <div id="app">. u ^4 A: L; `
- <p>原始字符串: {{ message }}</p>1 W$ u3 p0 Q V! Q/ ?/ b+ _0 S
- <p>计算后反转字符串: {{ reversedMessage }}</p>
! U l$ v$ I! m - </div>, i+ }5 p- r* }
- 7 n* g1 f; C3 j- |
- <script>
' u' H# A: V2 R3 | - var vm = new Vue({
' k7 N7 U& T& x9 m1 Y$ ^ - el: '#app',5 s) C1 F' H# Q) x+ Q
- data: {+ f" Q) o/ T7 G3 n5 _/ T( N; q
- message: 'Runoob!'
# {, c6 e: }. c; K$ I - },4 i* M. N* ^$ K6 i. d- \, p; Z
- computed: {
: T4 a0 o) d- [4 \* \ - // 计算属性的 getter
! G; Q& i2 A- X" t1 m - reversedMessage: function () {
1 p7 t9 n$ H! w$ y4 [ - // `this` 指向 vm 实例: H( ~) C, t+ Y# ~6 K
- return this.message.split('').reverse().join('')1 _7 c3 _2 @6 U7 I' b8 h% H
- }3 b+ v% }4 }& I6 k* s
- }7 E I2 T0 E' U( u3 W
- })
6 ^/ {9 Z9 G) k+ m0 r0 l - </script>
复制代码实例 2 中声明了一个计算属性 reversedMessage 。 提供的函数将用作属性 vm.reversedMessage 的 getter 。 vm.reversedMessage 依赖于 vm.message,在 vm.message 发生改变时,vm.reversedMessage 也会更新。 computed vs methods我们可以使用 methods 来替代 computed,效果上两个都是一样的,但是 computed 是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值。而使用 methods ,在重新渲染的时候,函数总会重新调用执行。 实例 39 H% C& \# n e& E% q- ?0 m$ Y
- methods: {
4 b, z* E; I' S: D - reversedMessage2: function () {
4 [- r% A- i) `' `2 }4 o5 _ - return this.message.split('').reverse().join('')
2 _$ f# U* h% I' H" ~0 J- ~ - }
: c% |9 ]% B$ c6 F; U! F - }
复制代码可以说使用 computed 性能会更好,但是如果你不希望缓存,你可以使用 methods 属性。 computed settercomputed 属性默认只有 getter ,不过在需要时你也可以提供一个 setter : 实例 4
2 Q1 J7 G1 {) ~+ |- var vm = new Vue({& W; X& T% B9 Q! V! k5 T F
- el: '#app',( o% h o7 i! b1 F
- data: {& R! o+ ~8 T a9 d; U3 [, p$ k
- name: 'Google',
& o5 `0 z: b4 R; n - url: 'http://www.google.com'
5 E+ b$ t% v, ^- T0 X# A& Y - },
0 A+ b9 q1 U( Q% g - computed: {
! R9 N3 m1 k! H8 g$ a4 U# @ - site: {, P/ D0 @* ?' n- P9 |% R8 F
- // getter9 V& d' J2 S, M' S1 G Q
- get: function () {% P& Z; X/ O" n3 g) u' j
- return this.name + ' ' + this.url h1 h; `8 R# s7 G2 t
- },2 j9 o* y& Q" S6 W
- // setter2 y+ E* U6 h, V2 \: J: M
- set: function (newValue) {9 m* r" V/ |5 M" a0 @3 L. V
- var names = newValue.split(' ')4 p3 k; G" H2 J' M
- this.name = names[0]4 ]9 b0 O- J- a5 j5 Q
- this.url = names[names.length - 1]
1 } p: @5 L8 z9 m# {8 P; A - }$ u7 N |3 h% S* M8 @
- }
# B" Q" K2 [3 r8 \" { - }
0 ~' g1 A8 e1 c& o - })
: Y; K% x0 G' O& e - // 调用 setter, vm.name 和 vm.url 也会被对应更新
' R$ ~2 G5 q. j- b% x - vm.site = '百度教程 http://www.baidu.com';2 C4 r- m' U5 J9 H/ M
- document.write('name: ' + vm.name);
. `& I2 _7 g& @! u! u5 d; t - document.write('<br>');
# U9 }: ?8 A U( N6 X7 r* S - document.write('url: ' + vm.url);
复制代码 从实例运行结果看在运行 vm.site = '百度教程 http://www.baidu.com'; 时,setter 会被调用, vm.name 和 vm.url 也会被对应更新。
0 N. S+ H: {2 ~1 B4 v5 Y$ A+ g
! J; @/ i, H/ a6 S
5 M2 h+ P. ~6 e1 @% v% a: [3 V) [# j3 ]$ p1 w
- \+ Q; }& ~9 W9 p1 h7 [
* p( Z% F! K& g1 Z
|