计算属性关键词: computed。 计算属性在处理一些复杂逻辑时是很有用的。 可以看下以下反转字符串的例子: 实例 1! m0 h7 C+ q# p/ Q
- <div id="app">
' [; D) e1 U* f1 j- Q. F- i - {{ message.split('').reverse().join('') }}
# x5 A( S. F: p& x: A$ n" ?/ U - </div>
复制代码实例 1 中模板变的很复杂起来,也不容易看懂理解。 接下来我们看看使用了计算属性的实例: 实例 2: O. e% o! _, a$ i2 J' |
- <div id="app">9 C% t, w& l" S) {* U3 ~# D4 d2 a
- <p>原始字符串: {{ message }}</p>; Y& C# z% K: @% m1 l
- <p>计算后反转字符串: {{ reversedMessage }}</p>
9 K0 O4 j6 \7 l$ D - </div>
: w- {' e( e' _0 F4 |2 Y6 p -
( z S, d8 _, [% S - <script>! Y) U5 h s4 Y/ n: O
- var vm = new Vue({% r6 b0 b% {$ d( q( T
- el: '#app',
6 _5 u+ u1 D; P0 q# S; b# R [ - data: {: K3 t0 @0 p3 y& D9 L
- message: 'Runoob!'" g( a) G% h! S
- },
# X. E; A; R; P+ B7 ~7 z4 u0 o# R - computed: {2 q* ]3 @0 o/ P# A7 R
- // 计算属性的 getter; y# @& c5 n- B/ _+ f
- reversedMessage: function () {! ^9 B) n( O/ W% B4 A
- // `this` 指向 vm 实例
( N# V8 q; b- k1 M - return this.message.split('').reverse().join('')
p; o& ^1 l6 T5 U. B7 i - }
! k* a J* f1 u - }5 R3 ?& D% W$ p7 c Q, ?
- })
1 @% p# l; `* m. g - </script>
复制代码实例 2 中声明了一个计算属性 reversedMessage 。 提供的函数将用作属性 vm.reversedMessage 的 getter 。 vm.reversedMessage 依赖于 vm.message,在 vm.message 发生改变时,vm.reversedMessage 也会更新。 computed vs methods我们可以使用 methods 来替代 computed,效果上两个都是一样的,但是 computed 是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值。而使用 methods ,在重新渲染的时候,函数总会重新调用执行。 实例 3) f9 A$ u2 Z$ F# u# ?
- methods: {
# n! y/ b+ J. B9 m1 H - reversedMessage2: function () {
6 I9 v) j' u) D6 h& W }4 S7 \ - return this.message.split('').reverse().join('') [0 E4 r& l6 L
- }
' F) B1 G q" _6 ~1 x: W - }
复制代码可以说使用 computed 性能会更好,但是如果你不希望缓存,你可以使用 methods 属性。 computed settercomputed 属性默认只有 getter ,不过在需要时你也可以提供一个 setter : 实例 4) N- ^1 h6 ^& K+ h9 t
- var vm = new Vue({
8 G, W! N: n% N1 b% s# M# h - el: '#app',5 }+ r7 o6 W4 V: G
- data: {
2 q" V" V! H8 p - name: 'Google',' h# J# }& v9 V8 _/ h' ?( o
- url: 'http://www.google.com'
8 y2 |# v2 i- b4 n9 C1 R - },
% o& }7 x7 M: u7 I3 x' X+ ` - computed: {* s1 S9 b! M. e# E4 {+ Z
- site: {5 F6 @4 z( ]9 M; o) f
- // getter* o/ u9 y( ~) l- X; ~
- get: function () {# x4 e, y2 v) U: I) r
- return this.name + ' ' + this.url+ U I* ]$ }* b& E4 C
- },
" {3 {0 ?& Z2 h9 v3 X' v - // setter9 o% n0 W: F( v
- set: function (newValue) {
6 t: [% O+ M- M7 q# Y/ A6 f9 {( R+ w - var names = newValue.split(' ')% ]) ^4 U( T0 r; R8 M4 y
- this.name = names[0], ~7 D5 L# f* D1 [# s6 D
- this.url = names[names.length - 1]4 @9 A3 `& U4 ^! e2 W4 O
- }
0 h3 J" }5 y! B$ Y5 g: _& n1 ^$ _ - }5 M+ ]7 Z7 e# j0 l3 v' V+ j
- }
& @9 k" X0 p% {/ e( L6 w7 _ h* b) [2 Y - })4 I2 I `8 a( C: O' |; Y
- // 调用 setter, vm.name 和 vm.url 也会被对应更新% \5 O( O- d9 U' V
- vm.site = '百度教程 http://www.baidu.com';
+ V# g$ Q& J }6 s* H4 R8 z& [, q( E - document.write('name: ' + vm.name);& b) X3 L! `% s$ U2 w. k" y4 b
- document.write('<br>');
& d0 m0 U: X& m - document.write('url: ' + vm.url);
复制代码 从实例运行结果看在运行 vm.site = '百度教程 http://www.baidu.com'; 时,setter 会被调用, vm.name 和 vm.url 也会被对应更新。0 O8 h9 z2 K6 J' d
" A4 q0 u9 ?9 _. ]4 k$ _: z
* E4 ]7 @2 ], m& P' X
% }1 K8 h6 v( Q' ?% E: m6 B4 U
7 p! R; w+ e0 h- l) u$ E* |( |; b9 K4 Q9 e
|