计算属性关键词: computed。 计算属性在处理一些复杂逻辑时是很有用的。 可以看下以下反转字符串的例子: 实例 12 H8 y% H( Q% V7 _0 L3 f
- <div id="app">
; r' X# t8 W T' k - {{ message.split('').reverse().join('') }}
5 o$ U9 c9 i8 j& i: s; `( r - </div>
复制代码实例 1 中模板变的很复杂起来,也不容易看懂理解。 接下来我们看看使用了计算属性的实例: 实例 2
* B5 {( K7 m; W4 q- Q- <div id="app">. l! d/ J2 i* r8 u- v
- <p>原始字符串: {{ message }}</p>
( M5 A/ N i4 T! [( e+ } - <p>计算后反转字符串: {{ reversedMessage }}</p>" i8 [# X: G) l) ~3 @# {# @
- </div>% a$ j$ U% S) C( m7 y2 W4 p
- * |0 z) N* U2 ^3 u. i
- <script>
$ @, @9 n' {4 h/ _( W - var vm = new Vue({
7 X0 _! Y% }, w; |( h' T9 k - el: '#app',
- H' K) B% \; ?( J2 j - data: {- A+ l% J& P: W* d
- message: 'Runoob!': C, s. j, M" a
- },. V" n: f, c0 l2 h
- computed: {5 S) v' W4 X6 s9 p' e
- // 计算属性的 getter, h7 s2 x, A! s U$ Q. T
- reversedMessage: function () {. S8 ~, Y' Y" d% ]2 }
- // `this` 指向 vm 实例+ y8 K$ J& c) Z* x# f* }! ~9 S
- return this.message.split('').reverse().join('')- J7 C' Y! O8 M; [; O0 _0 k. O7 b- _
- }
: r3 z7 w) b9 l8 ~0 ? - }
: c( ~8 G9 Z0 `, S8 [9 R - }): k2 K) W2 b4 n C, p
- </script>
复制代码实例 2 中声明了一个计算属性 reversedMessage 。 提供的函数将用作属性 vm.reversedMessage 的 getter 。 vm.reversedMessage 依赖于 vm.message,在 vm.message 发生改变时,vm.reversedMessage 也会更新。 computed vs methods我们可以使用 methods 来替代 computed,效果上两个都是一样的,但是 computed 是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值。而使用 methods ,在重新渲染的时候,函数总会重新调用执行。 实例 3) c- s: x; Z, a& a$ u% I7 y
- methods: {7 [ j- ~( |7 d. ]% z7 w5 r
- reversedMessage2: function () {7 f8 [2 `8 k1 Y. ^3 e/ s6 A4 M
- return this.message.split('').reverse().join('')2 ^/ Z# S7 c% D8 Y/ N
- }" G A, A7 I% q* p4 i7 E
- }
复制代码可以说使用 computed 性能会更好,但是如果你不希望缓存,你可以使用 methods 属性。 computed settercomputed 属性默认只有 getter ,不过在需要时你也可以提供一个 setter : 实例 41 y! ]* k: Q2 `# b6 }6 }
- var vm = new Vue({
$ ^$ W9 U: w; Y - el: '#app',. R W1 T u7 }9 T% B$ `( V: j. A
- data: {! L; z1 m6 J) T! i) b
- name: 'Google',9 @7 I% O( Z+ n. L4 y
- url: 'http://www.google.com'
( V k& M8 D+ |( z; Y8 C0 N( W- K - },
' p. N& O$ N9 i - computed: {
& M8 t& J& R1 ]) C; g- x9 _; ? - site: {9 h+ Z b9 Z- ~; w
- // getter
5 [- Y2 p$ Y7 S# D - get: function () {
3 W n6 j# {$ z: p - return this.name + ' ' + this.url
5 h+ n, z3 }% ]9 J( ]) n - },! b4 Q/ z4 N+ E3 r( I
- // setter
4 Q9 J5 h0 ~9 g5 Q. Q - set: function (newValue) {+ c x! W* @7 R& i* i/ o8 ]
- var names = newValue.split(' ')9 W( u. v2 M1 v/ p6 F7 M7 B) |" }% f
- this.name = names[0] X C( X) E6 M9 x
- this.url = names[names.length - 1]
2 f: z( m0 _& S B - }1 Z7 D) M9 ?3 r$ r# C: J8 i( ]* I% M
- }
- t8 _# y; L" L0 k/ `1 Y1 ~ - }+ T) O. ^5 f1 K1 b ]9 a- I' @. d
- })- g; e! f" N: G+ Q8 i$ ]8 _
- // 调用 setter, vm.name 和 vm.url 也会被对应更新3 l5 B( E; D* r) v1 m, T3 Z4 F+ a
- vm.site = '百度教程 http://www.baidu.com';
( s; W. f" D4 m1 h8 M# N - document.write('name: ' + vm.name);! G& K) c0 j% ?4 A0 W* s9 a
- document.write('<br>');
9 F- J& ~# o# K' d& B% A7 J - document.write('url: ' + vm.url);
复制代码 从实例运行结果看在运行 vm.site = '百度教程 http://www.baidu.com'; 时,setter 会被调用, vm.name 和 vm.url 也会被对应更新。
$ V' \0 E9 D9 t+ o
% F/ Y2 y" V4 o- B4 s' ~
7 _) X/ G4 n T, y# L! S' F( n
. {6 D: F2 a7 y. h# ^5 k8 S- k/ K! a5 I% A
6 q5 p. B# T3 T4 F7 _9 d8 r
|