计算属性关键词: computed。 计算属性在处理一些复杂逻辑时是很有用的。 可以看下以下反转字符串的例子: 实例 1
$ p7 S6 p" N l$ _- <div id="app">6 M% t; O4 O" A/ K
- {{ message.split('').reverse().join('') }}
0 d; J3 p. p8 e( s' m - </div>
复制代码实例 1 中模板变的很复杂起来,也不容易看懂理解。 接下来我们看看使用了计算属性的实例: 实例 2
& w+ `$ a9 K% f" `- <div id="app">( L+ Q7 \$ m: h4 G1 G& D
- <p>原始字符串: {{ message }}</p>6 B R, A3 ^2 B5 ~! v) b; G
- <p>计算后反转字符串: {{ reversedMessage }}</p>& |9 |7 z4 X- @ ]
- </div>
8 }0 T1 ?( f( I3 a' C$ {- {. ] -
% X( y3 S; P4 n x9 K& c; R - <script>; u! ]4 W5 M* h8 b* L: ^
- var vm = new Vue({
2 z& m) x9 K! b( N- T9 C2 o4 h - el: '#app',4 A( w4 q. |7 e9 [# U& {
- data: {
! H, p* `# ^: J - message: 'Runoob!'
9 P* g( e/ e4 @- | - },
4 p4 T: Q$ [) z8 c) X. | - computed: {
% _6 y, |! z* g9 G* L - // 计算属性的 getter$ g. {0 K, O+ J# N/ o# p9 u% U
- reversedMessage: function () {! f% H" `4 S% w9 x. V2 ?# ^
- // `this` 指向 vm 实例, G, b, ^7 H0 C2 K
- return this.message.split('').reverse().join('')$ j, Q$ F. w" ?! J% d; [% u
- }( J* W1 h# y2 x* {% n, d" c; d
- }, y( G' m$ g- X; G! K4 ]% A7 K1 s
- })
3 p6 k: e' j [# y# e - </script>
复制代码实例 2 中声明了一个计算属性 reversedMessage 。 提供的函数将用作属性 vm.reversedMessage 的 getter 。 vm.reversedMessage 依赖于 vm.message,在 vm.message 发生改变时,vm.reversedMessage 也会更新。 computed vs methods我们可以使用 methods 来替代 computed,效果上两个都是一样的,但是 computed 是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值。而使用 methods ,在重新渲染的时候,函数总会重新调用执行。 实例 3
& U+ b) v4 N3 T+ n- methods: {. K8 y9 A" V7 M6 A4 i% c
- reversedMessage2: function () {% D8 Y1 i* v* w1 y$ \2 u
- return this.message.split('').reverse().join('')
7 I" l6 m- Y& @* V% ` M( E% F - }/ a5 G5 ?( ~4 M& H) _
- }
复制代码可以说使用 computed 性能会更好,但是如果你不希望缓存,你可以使用 methods 属性。 computed settercomputed 属性默认只有 getter ,不过在需要时你也可以提供一个 setter : 实例 4
% O( q. i# p: H, T- var vm = new Vue({% e6 \' q& k/ Z. w* v. {* [" R
- el: '#app',
5 ~7 K' w2 E) O - data: {" M- @& X0 y: ?& M- A3 Q% m
- name: 'Google',; t& t P1 `, S7 g) ~2 Z5 D, J
- url: 'http://www.google.com'
8 r0 c9 i3 Y- `* {* ]4 f6 Q* s* h' i - },6 `2 n9 d- s4 \( k$ L5 ~# |
- computed: {
" l# v2 q) h3 [: f* f - site: {4 p4 R0 I, C, y$ `
- // getter( \& g F) J$ B+ V5 L5 U
- get: function () {- i" ~" w4 F2 s* M* x; o5 ?
- return this.name + ' ' + this.url
3 J% E; x2 z5 W9 \5 q# b - },
2 F& E) [: X# O" D& X4 x - // setter, q( i, B2 W0 J4 y) B
- set: function (newValue) {3 _+ o; d- Y& j& K. x/ G! z! G
- var names = newValue.split(' ')1 O. v/ V9 D8 F0 d
- this.name = names[0]
( v& S$ X, O) @ - this.url = names[names.length - 1]1 q4 _, v0 [0 k# H- P+ F+ V/ O U
- }! [1 }6 t+ ?% Q* L+ V! {
- }
0 o# N+ U) J1 ?5 o1 t7 ]( l' |' h; F - }: Q, v+ x3 D; c
- })8 ~( A5 J8 r" H: c
- // 调用 setter, vm.name 和 vm.url 也会被对应更新
$ D6 i1 Q3 f1 T9 ~ e5 o; l7 i; | - vm.site = '百度教程 http://www.baidu.com';5 K6 D/ v( M3 \2 X1 y
- document.write('name: ' + vm.name);7 t+ f4 D1 W5 f ^7 e4 \" E
- document.write('<br>');
) W% Y4 S. F2 C9 J4 j - document.write('url: ' + vm.url);
复制代码 从实例运行结果看在运行 vm.site = '百度教程 http://www.baidu.com'; 时,setter 会被调用, vm.name 和 vm.url 也会被对应更新。; @& p) H7 X3 R8 y! W) h
: T1 j9 ?7 `' X: n q
2 ]$ h5 q+ I8 s" v6 R
7 \! [) W! ~! w4 [+ k" s
. T5 r, L+ ?, y, x' d, \* s
5 ?4 E3 A/ @& B: @3 C |