计算属性关键词: computed。 计算属性在处理一些复杂逻辑时是很有用的。 可以看下以下反转字符串的例子: 实例 11 a- g5 d3 i3 }: C" `
- <div id="app">
" V$ a8 `3 W! L8 t2 z - {{ message.split('').reverse().join('') }}2 F- z% i* b- m
- </div>
复制代码实例 1 中模板变的很复杂起来,也不容易看懂理解。 接下来我们看看使用了计算属性的实例: 实例 24 t1 n% c; E( I& Q2 J+ n& W
- <div id="app">+ X; Y5 D0 D5 x# J; ?
- <p>原始字符串: {{ message }}</p>9 D4 ?' \# {" ]& t$ ]
- <p>计算后反转字符串: {{ reversedMessage }}</p>
& m* L- `7 D' `% k- a" s( x @ - </div>
/ ^- w4 Y( ]* J6 N -
% X& ?& _9 X( |, v3 H" u3 J - <script>8 Q; e* l+ V4 S8 m) }# V
- var vm = new Vue({
) j$ D4 y) p( X2 M3 p, e - el: '#app',* o2 H, B6 Z5 h2 _8 E9 R9 J
- data: {) }+ [1 b6 v5 G% Q. k* }
- message: 'Runoob!'- V- R s4 y/ Y R
- },! ^: n1 I$ t: k9 s: X' a. L
- computed: {
" `& W; A. [; z# M - // 计算属性的 getter
d: D7 J" Y, i1 J - reversedMessage: function () {# L$ X2 x U3 H/ w& Q! T
- // `this` 指向 vm 实例' B h/ f# W, x, Z
- return this.message.split('').reverse().join('')
! B, l) B5 w/ D& O$ V, X8 F+ c5 I - }1 @% v% K4 B# @8 `3 { j, H0 g
- }
/ f4 }5 H( a- u( m( i3 R: f8 J. X - }): r4 K' ~3 f# r- G9 |
- </script>
复制代码实例 2 中声明了一个计算属性 reversedMessage 。 提供的函数将用作属性 vm.reversedMessage 的 getter 。 vm.reversedMessage 依赖于 vm.message,在 vm.message 发生改变时,vm.reversedMessage 也会更新。 computed vs methods我们可以使用 methods 来替代 computed,效果上两个都是一样的,但是 computed 是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值。而使用 methods ,在重新渲染的时候,函数总会重新调用执行。 实例 3$ H6 e9 d+ l( F9 |% s x0 f7 P
- methods: {( z$ e) N+ D* O6 N
- reversedMessage2: function () {
( j0 T2 s8 a/ f - return this.message.split('').reverse().join('')* d) ]/ R2 C1 p+ d9 t+ T, P
- }
( L. d- \+ t: A* i9 e( `) x - }
复制代码可以说使用 computed 性能会更好,但是如果你不希望缓存,你可以使用 methods 属性。 computed settercomputed 属性默认只有 getter ,不过在需要时你也可以提供一个 setter : 实例 4
3 K- K1 H; s3 w& Q- var vm = new Vue({
4 G& v9 O3 b; c( B" S$ y$ q6 M - el: '#app',
, c, u, }' a$ c" e% Y5 m$ { - data: {- G0 r& p' s, T9 S3 u( t. G: a
- name: 'Google',
$ I4 H: k7 M4 ?3 k7 H8 s; | - url: 'http://www.google.com'
6 ^# ?; T! a9 Q0 s3 ^ - },/ o' |* q; S( c4 S' T9 q/ J7 ?, F9 d
- computed: {
& ?& p2 n' D" c1 I' @7 m - site: {
) z- N4 M* p2 w9 X. h* p - // getter
: @0 j. U# `1 M# W- @7 \3 j - get: function () {
f. e6 a- y, `% @0 p) e( F - return this.name + ' ' + this.url
. @% D& t. o6 N5 ]* e( K+ | - },- M1 D7 g- x& M: r, t* l1 o( j
- // setter
6 h/ B, d0 l; M/ u - set: function (newValue) {
2 b3 u/ V |* f/ D7 N+ j$ N- T( q - var names = newValue.split(' ')
5 j3 s& h/ I# M/ v: g - this.name = names[0]
' j8 X2 X+ l. T" B9 h* @7 T, H - this.url = names[names.length - 1]' p5 N% z# g: H$ G- f8 ]
- }
+ N" ~$ |) B5 l9 n* ]. [4 R - }
2 K& _0 `& c* T. x+ a& q - }# t8 V0 ~! `$ H6 x" y: J1 o
- })% l' D1 ]+ U4 s. {! D2 D" p% t
- // 调用 setter, vm.name 和 vm.url 也会被对应更新8 J7 h+ Z! W" h4 w R/ y
- vm.site = '百度教程 http://www.baidu.com';$ P8 a/ G- \# \0 K, K: b+ ^2 ?
- document.write('name: ' + vm.name);2 Q0 @) R/ ^" e5 M7 V
- document.write('<br>');
) G' y! K3 h! `- A$ o6 ~8 n0 k - document.write('url: ' + vm.url);
复制代码 从实例运行结果看在运行 vm.site = '百度教程 http://www.baidu.com'; 时,setter 会被调用, vm.name 和 vm.url 也会被对应更新。
3 s Q$ K; i a5 s. }' t# B2 k
/ Q3 E* l0 |: k, O) P3 K a: w
" s- E, p% @2 I+ d# L' i$ y* a
/ Q/ M z5 ]8 w& U; W! V, V, W3 e
$ _1 {' c0 |' \+ r) L/ N2 o% \) l/ d% `" r' t$ |
|