计算属性关键词: computed。 计算属性在处理一些复杂逻辑时是很有用的。 可以看下以下反转字符串的例子: 实例 17 u4 m. x3 ~3 m' l4 m* k
- <div id="app">% Z% ?: p! m9 F" g4 b% q; m% {, p" _
- {{ message.split('').reverse().join('') }}
+ |! _5 O8 U! V- \! r( G - </div>
复制代码实例 1 中模板变的很复杂起来,也不容易看懂理解。 接下来我们看看使用了计算属性的实例: 实例 2
: h: n6 q: R! i" ?- <div id="app">
, S; D0 |0 H$ h. O - <p>原始字符串: {{ message }}</p>
, Z7 F. ^0 A1 S9 c* Z - <p>计算后反转字符串: {{ reversedMessage }}</p>
: M2 A: F7 d+ t+ t) O: h - </div>
; [% R6 \3 s, s -
9 t, @1 A1 D0 G5 [4 |9 B - <script>
+ I0 n3 ?* A/ F* t0 y( q. n - var vm = new Vue({
5 ^* h' Z3 Y3 {( [* A - el: '#app',
4 p* R: O0 X4 P: B. s - data: {5 |2 Z% b: c- j, a' u0 u
- message: 'Runoob!'# ]% c% h! y9 E; a
- },
O, n" j. q& R - computed: {
* a8 v Y( |2 f& G, ^& M8 Y9 h* S J - // 计算属性的 getter" _+ O0 U8 \7 i( N, {
- reversedMessage: function () {
7 t! c$ f- P; u; K/ ~5 T - // `this` 指向 vm 实例
6 w. ?7 S1 h! J, d$ K - return this.message.split('').reverse().join('')& }9 y H9 J. h- i5 t( ?& M( V% P
- }
]6 P* F0 s* m; p4 s - }! }$ i; C! O- C0 M+ \
- })
* [ m/ T8 P( k - </script>
复制代码实例 2 中声明了一个计算属性 reversedMessage 。 提供的函数将用作属性 vm.reversedMessage 的 getter 。 vm.reversedMessage 依赖于 vm.message,在 vm.message 发生改变时,vm.reversedMessage 也会更新。 computed vs methods我们可以使用 methods 来替代 computed,效果上两个都是一样的,但是 computed 是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值。而使用 methods ,在重新渲染的时候,函数总会重新调用执行。 实例 36 h5 d9 d! P5 H
- methods: {# g) e1 S+ @/ b3 ]* `4 o
- reversedMessage2: function () {2 t$ w$ B/ D7 Q* [! Q! o, v
- return this.message.split('').reverse().join('')1 L- \% @4 t3 ]% K& |0 k
- }7 [0 Z5 [& C. Q2 R! q8 s
- }
复制代码可以说使用 computed 性能会更好,但是如果你不希望缓存,你可以使用 methods 属性。 computed settercomputed 属性默认只有 getter ,不过在需要时你也可以提供一个 setter : 实例 4/ p' p$ C: W1 G' B, T A, W
- var vm = new Vue({! K7 ?8 x3 X) {! k% v
- el: '#app',
; W+ q: `& o: r+ y$ N+ e4 }: g - data: {
# j9 Y, O/ ~9 N8 R - name: 'Google',
0 E+ v3 d7 U* E9 r& e6 ?' {. Q* _ - url: 'http://www.google.com'
+ A' O; m: w) J8 g3 P; L - },
) N( b3 J- o) W# x - computed: {
8 R5 Z. e7 o' ], H5 b: B5 M - site: {/ [5 A. c Z! |- v* T* P/ @$ _* G
- // getter( Q, V8 G# k% m* G' M3 G
- get: function () {
3 T4 V4 M( c* u* b, U O - return this.name + ' ' + this.url
) [8 f# X9 i7 @: y0 \ - },
( l4 r" i4 B# y - // setter
) ]9 A, B2 g# n2 B - set: function (newValue) {
. ~- `* K# D, ~% ]( R9 O+ \ - var names = newValue.split(' ')' t; E) z b4 K, C( }' j
- this.name = names[0]" [( c8 U. S9 s+ |+ f
- this.url = names[names.length - 1]" e4 x" X9 o3 Y& B. m
- }6 B- W' ]- b; B% h; O. y
- }
0 C l6 K. {" j I - }
! g) C# w0 `1 L2 L - })
9 g6 A# N' }) Q L; G, M - // 调用 setter, vm.name 和 vm.url 也会被对应更新& |& I7 t. C* o
- vm.site = '百度教程 http://www.baidu.com';. V; l) w2 }" K1 X& \
- document.write('name: ' + vm.name);
' o7 c3 `$ N1 [& J$ U% J* V - document.write('<br>');
3 B0 J; I) A- |, d! L; q - document.write('url: ' + vm.url);
复制代码 从实例运行结果看在运行 vm.site = '百度教程 http://www.baidu.com'; 时,setter 会被调用, vm.name 和 vm.url 也会被对应更新。
5 d8 s; W" I, \9 B1 T O
" T+ s- S- M& v. ~0 h% y1 y
& W9 S3 E, g3 I2 A% K3 s+ ~
% o% h1 @/ [# w+ z' N) w7 j7 ]
& P" }* n% c# P- Z n0 x ~
, l8 a" @4 M4 N) g% ^) `0 k. p |