计算属性关键词: computed。 计算属性在处理一些复杂逻辑时是很有用的。 可以看下以下反转字符串的例子: 实例 1
& }" o# J7 R3 `. o6 V- <div id="app">
& v0 E# s3 g. j" `# N" Y8 u - {{ message.split('').reverse().join('') }}# r# ~' M1 t! Z4 P: K6 g5 [% |! j
- </div>
复制代码实例 1 中模板变的很复杂起来,也不容易看懂理解。 接下来我们看看使用了计算属性的实例: 实例 2
c5 V7 }0 |# U- <div id="app">
W- x1 W) t* ]7 l8 J - <p>原始字符串: {{ message }}</p>
+ s* t) t9 P- M* I8 C* \0 l - <p>计算后反转字符串: {{ reversedMessage }}</p>0 V4 e7 E) [/ v W3 L R/ T
- </div>) D' v- U" K3 G1 d2 q
-
0 l7 B3 l/ _6 k2 s, h$ G( ^3 E, g7 y - <script>
& {. ~# s* q# t x+ L% n$ {- T - var vm = new Vue({' o- g) e# ^% f; z( [) i
- el: '#app',
, M1 J* ^5 q) }$ v - data: {
2 N( G4 q0 r$ g. M" f L - message: 'Runoob!'( N* m% k3 f! ?
- },
" G* }! q. D9 k - computed: {* c" L5 i9 l/ \+ u5 Z3 Q7 e5 D& s
- // 计算属性的 getter. D$ F+ e: R) i* y; l7 x
- reversedMessage: function () {) k F, S1 K% y* B& E5 C
- // `this` 指向 vm 实例
6 o' q8 e3 x3 E: u - return this.message.split('').reverse().join('')8 P* a0 z- Y' ?4 ^' n, o- A5 n: C. U
- }
: n+ I$ V' S0 ]3 |5 B5 m% s - }
! h( \1 F$ V4 O/ \& {& T - }); n! X. Q* x7 H6 Y$ p
- </script>
复制代码实例 2 中声明了一个计算属性 reversedMessage 。 提供的函数将用作属性 vm.reversedMessage 的 getter 。 vm.reversedMessage 依赖于 vm.message,在 vm.message 发生改变时,vm.reversedMessage 也会更新。 computed vs methods我们可以使用 methods 来替代 computed,效果上两个都是一样的,但是 computed 是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值。而使用 methods ,在重新渲染的时候,函数总会重新调用执行。 实例 3, t- B: D- K7 M( m3 G. t3 k
- methods: {, g/ [5 q3 y$ _* n& }5 {3 i- `
- reversedMessage2: function () {
/ V$ @8 a1 ?. L0 [3 L( _ - return this.message.split('').reverse().join('')
! x- [7 H, R, P1 i4 w - }
/ l8 _, S/ j& q - }
复制代码可以说使用 computed 性能会更好,但是如果你不希望缓存,你可以使用 methods 属性。 computed settercomputed 属性默认只有 getter ,不过在需要时你也可以提供一个 setter : 实例 4# C! N/ P/ ]' W4 d0 q
- var vm = new Vue({. C4 E" i5 a S+ K( p' Y% `
- el: '#app',
7 O7 b6 a; f$ p) ~) _ - data: {
, T/ r* E# I& Z - name: 'Google',
. M4 d/ ~( R/ _ - url: 'http://www.google.com' z1 h$ o. B4 \, R+ L( g6 z
- },- `* t8 |& Q5 M' l `) f# ]8 g
- computed: {$ {0 E9 h; N9 C9 r' I6 V
- site: {+ R" e$ P- v( t5 _
- // getter8 Z: T+ }" C) e. X7 j$ v0 x, E* Y
- get: function () {
, n% _2 Y9 J' y2 M, d7 i9 n - return this.name + ' ' + this.url
+ Z% o% }; P' X- }7 M( E ?5 y4 ` - },! |# J3 @; P/ [$ M9 ]( Z
- // setter& G# b5 Z5 F- ]: F
- set: function (newValue) {& d# s' \4 g* o) m. D
- var names = newValue.split(' ')+ M' ?) s3 J! m5 p! T$ y8 @8 G
- this.name = names[0]
3 J% U3 ]& W1 N. E8 Q - this.url = names[names.length - 1]) O( b& Q, h! Z7 o
- }0 ^$ j9 ]7 V% b q! O o; o) ~
- }3 g' w+ ], O2 s- d/ [$ u
- }
- d* M, }6 ?- M5 Q$ m7 T - })
. ]6 ]5 c* M! ? - // 调用 setter, vm.name 和 vm.url 也会被对应更新
5 V+ D3 k0 Y- M& S* h5 m* b: t - vm.site = '百度教程 http://www.baidu.com';
4 |+ v K* Y# M& R( i' } - document.write('name: ' + vm.name);7 `4 n) z5 n3 ?; h! e" ^
- document.write('<br>');
# n6 t# U7 ~4 a+ K - document.write('url: ' + vm.url);
复制代码 从实例运行结果看在运行 vm.site = '百度教程 http://www.baidu.com'; 时,setter 会被调用, vm.name 和 vm.url 也会被对应更新。5 c9 |! h: R' H1 g* N
. _ m. c, g7 H( X2 u& m& |6 `
% e% h* C7 i7 z! _! Y( J; {5 W) x' u6 a7 P/ b- U; R5 {
2 u7 {9 ]" F- z7 Q s+ `5 a) X
/ ~0 t/ U* J) f. L; V |