计算属性关键词: computed。 计算属性在处理一些复杂逻辑时是很有用的。 可以看下以下反转字符串的例子: 实例 1) l* \. i8 v; A
- <div id="app">7 g: _! P3 F7 f, z7 Q j
- {{ message.split('').reverse().join('') }}; f8 Q9 q7 \* [# p& t7 _+ R
- </div>
复制代码实例 1 中模板变的很复杂起来,也不容易看懂理解。 接下来我们看看使用了计算属性的实例: 实例 2
6 @$ C* P. o, `8 v* Y9 A% s- <div id="app">
* N; _7 |* B( y3 B5 h9 } - <p>原始字符串: {{ message }}</p>
% w- ^+ g* g* O/ I - <p>计算后反转字符串: {{ reversedMessage }}</p>
. N4 M, y+ u9 F/ {/ w+ W - </div>0 _( `& N2 |1 {. h' N" I
- 7 \! |: m2 [. Y+ W, \
- <script>* f! j5 v% r. } L2 I7 n
- var vm = new Vue({: q5 b/ U) s1 T I' J m- t
- el: '#app',
7 K! ^/ ~. w8 ?; ]6 g, k - data: {8 H2 x. b$ J" N3 P: k1 W" Z
- message: 'Runoob!'- B9 |# i3 z5 P; P
- }, V. \) ^0 U$ R3 W' i
- computed: {1 s' J# G6 ]6 |: R3 \
- // 计算属性的 getter
5 G$ K1 [! W2 }% ~* D" b' j6 s7 B m - reversedMessage: function () {
) `/ `8 V2 Z, x3 M( y0 a - // `this` 指向 vm 实例
, k: G4 i5 _1 v - return this.message.split('').reverse().join('')
T3 |0 M& l) a% c2 |2 ]* b4 L2 k - }1 Y# _7 V! P. l: m" h* ]$ i, S8 D
- }
4 N/ M6 Q n1 N; s" I; i, }- Q* B - })
! L t# H: Z, w# z - </script>
复制代码实例 2 中声明了一个计算属性 reversedMessage 。 提供的函数将用作属性 vm.reversedMessage 的 getter 。 vm.reversedMessage 依赖于 vm.message,在 vm.message 发生改变时,vm.reversedMessage 也会更新。 computed vs methods我们可以使用 methods 来替代 computed,效果上两个都是一样的,但是 computed 是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值。而使用 methods ,在重新渲染的时候,函数总会重新调用执行。 实例 3. u6 a. p X5 s5 r0 m
- methods: {9 }7 k) y5 R$ K2 X8 F L7 @( Z0 G
- reversedMessage2: function () {+ H$ m( p9 ?' @/ ?1 b6 r) K( l
- return this.message.split('').reverse().join('')% `% X8 w) T4 p4 W' P
- }
/ t j! t. P3 i* _; r - }
复制代码可以说使用 computed 性能会更好,但是如果你不希望缓存,你可以使用 methods 属性。 computed settercomputed 属性默认只有 getter ,不过在需要时你也可以提供一个 setter : 实例 4# o& G, F) C+ ~: H8 I3 u$ @" ?
- var vm = new Vue({
2 @1 b; _6 o% X' X6 P( M- v - el: '#app',3 m! n N# t% |$ b
- data: {2 _$ \0 Y" u% }# _
- name: 'Google',
Y! {; U& Q5 n) j - url: 'http://www.google.com'( m5 x8 ]& f& _/ L
- },; w: x8 h" c. i) ?8 E5 Q
- computed: {
5 v. ~9 N ?" y' b' \/ r% x- J7 X - site: {
4 ^* v9 L) D0 S' t - // getter
8 G' x4 |! s l# c - get: function () {' @2 X$ L8 S' O$ I% }
- return this.name + ' ' + this.url
9 d- K- e7 ?3 d* h( N - },
! t8 s- R3 }) e* |. q- u - // setter* y. w( w5 V! F @. |) J
- set: function (newValue) {
2 I6 f9 |4 h7 p2 u* [# k' e4 E+ w - var names = newValue.split(' ')
7 O9 _3 o6 Q+ f - this.name = names[0]
; y- T" b. l; Z4 ?$ p; C - this.url = names[names.length - 1]7 t2 Z3 z1 P n- X5 }3 x& G/ N
- }
0 ~ E; L; l- \4 R# G - }
1 ^$ k2 l! x5 L( k! O% l# r - }
6 D0 _) J2 u# O& r# ?* n' ~ - })
( m2 z' v$ _8 ~2 q/ b d1 k) H - // 调用 setter, vm.name 和 vm.url 也会被对应更新
' L& t( _- C3 Q6 [# Z0 E w* t - vm.site = '百度教程 http://www.baidu.com';" ?6 `' ^* c( u, W
- document.write('name: ' + vm.name);
$ E+ a6 B `1 h - document.write('<br>');
, Y) X* h x [, H: V - document.write('url: ' + vm.url);
复制代码 从实例运行结果看在运行 vm.site = '百度教程 http://www.baidu.com'; 时,setter 会被调用, vm.name 和 vm.url 也会被对应更新。
" O8 o. C! z; U* W+ ]
. d& E1 M" u7 g& |% `" t) u: B- V9 a2 M) i3 r7 v: R# W
0 Z7 n, @' r! e9 c& U8 ?- W, k. l9 {9 l- O# b
% S5 t! h2 R, ^. f
|