计算属性关键词: computed。 计算属性在处理一些复杂逻辑时是很有用的。 可以看下以下反转字符串的例子: 实例 1
7 a% |+ d- O6 \- m# x) s- <div id="app"># {6 J0 A& [7 h5 t* b) U: @
- {{ message.split('').reverse().join('') }}
/ i& P ]& Y3 \4 l7 J/ {# A - </div>
复制代码实例 1 中模板变的很复杂起来,也不容易看懂理解。 接下来我们看看使用了计算属性的实例: 实例 2
& u: _# L7 v7 t1 r$ C* ]( P U- <div id="app">! @0 ]/ h7 R8 Z2 w4 p5 o" l
- <p>原始字符串: {{ message }}</p>7 i- g0 Q9 i. W6 s, x
- <p>计算后反转字符串: {{ reversedMessage }}</p>& J. w4 [: F8 s
- </div>0 m0 j" O# y7 j6 |$ N4 H
- ; F# {! u' y% g. C; J6 Y
- <script># D. `: i0 r, V/ r1 m
- var vm = new Vue({
9 Z6 e f L) |. t% R, ^' n - el: '#app',* K. J/ b) d _8 t% L5 H
- data: {
* C' j- m. C8 H8 [ - message: 'Runoob!'
, b. V8 [' B r0 F/ m - },5 k% g' C/ d5 Y. m
- computed: {. l% T! N& `% `, H; k% R
- // 计算属性的 getter. D+ o" C$ w5 i& c- `
- reversedMessage: function () {
5 J) n- m, x; [6 J6 K5 i) t - // `this` 指向 vm 实例
H4 h3 L* A2 T4 g - return this.message.split('').reverse().join('')) M- A8 J* P9 G! j/ P: E9 Q- H
- }1 c6 |9 L. i8 n5 B( p K' [. ^# ?
- }6 u8 T$ K. ?% ?1 w( O6 r% m8 b* w( r
- })1 }) V& i% ^6 F* [3 v' U3 u* O* n
- </script>
复制代码实例 2 中声明了一个计算属性 reversedMessage 。 提供的函数将用作属性 vm.reversedMessage 的 getter 。 vm.reversedMessage 依赖于 vm.message,在 vm.message 发生改变时,vm.reversedMessage 也会更新。 computed vs methods我们可以使用 methods 来替代 computed,效果上两个都是一样的,但是 computed 是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值。而使用 methods ,在重新渲染的时候,函数总会重新调用执行。 实例 3" a; \1 V8 B( ?' c4 I; j" q
- methods: {- z" ^% ]/ K2 n, a r
- reversedMessage2: function () {6 }) q/ v3 i7 Y6 s' r
- return this.message.split('').reverse().join('')
* X8 c% D7 f0 b) l% I3 u& K; T - }9 B1 W. D9 ?; ?: L
- }
复制代码可以说使用 computed 性能会更好,但是如果你不希望缓存,你可以使用 methods 属性。 computed settercomputed 属性默认只有 getter ,不过在需要时你也可以提供一个 setter : 实例 41 D m9 d3 J9 B, _4 S7 z
- var vm = new Vue({
/ [. E; x1 n/ @. R9 s - el: '#app',
; h6 L0 a7 y+ M6 D0 f3 K. k5 ]# a8 J - data: {8 L$ u$ m( g! z8 O4 m t
- name: 'Google',
2 B% c3 O- R. c1 T/ B: J$ r* r: h - url: 'http://www.google.com'1 Q2 x* s( O H* }" g( q
- },! S+ M$ b X+ V+ ?- r) P
- computed: {
% I8 T8 e- U0 ?" B0 u4 y - site: {
; A2 a2 f2 ?5 [ - // getter
! m9 s8 {, j. X* }" w0 A - get: function () {( A7 D3 B. A# u
- return this.name + ' ' + this.url/ @. {, f5 M7 }0 |9 ]/ v V
- },1 e& ?4 N0 ^1 m
- // setter
2 z4 Z2 }, Z$ w! D/ c: r& |, n$ ?, a - set: function (newValue) {+ H% O) E0 A/ x4 h3 e N- Q8 X
- var names = newValue.split(' '). }# x# H, E* ^: ?7 Y( s
- this.name = names[0]
7 I# d& e5 h- R - this.url = names[names.length - 1]
- P0 z5 |" N+ A - }: z! E1 V* v$ N" f0 H* Z
- } z6 L7 r7 U2 P) y" \; W
- }! O6 S* q$ [: f! j: y- ]# b& [$ H4 J
- })+ M; l4 H/ ]% s7 [' Q2 w
- // 调用 setter, vm.name 和 vm.url 也会被对应更新2 v+ }( z8 ? U8 b! X
- vm.site = '百度教程 http://www.baidu.com';- }* J9 S" j7 T
- document.write('name: ' + vm.name);
7 A/ \6 ?+ D6 } - document.write('<br>');
+ k1 D) y/ h5 f0 G) w - document.write('url: ' + vm.url);
复制代码 从实例运行结果看在运行 vm.site = '百度教程 http://www.baidu.com'; 时,setter 会被调用, vm.name 和 vm.url 也会被对应更新。
2 w3 X1 W, j1 {. b: p8 G* L0 j: [$ A
; d) s9 l5 p3 L% E3 G9 X. h! A8 ]8 U
2 b" U% y; A! }/ N1 O
7 ^* ]! T \7 `' |
+ j9 z0 v% b5 _$ S1 Y$ w- y |