计算属性关键词: computed。 计算属性在处理一些复杂逻辑时是很有用的。 可以看下以下反转字符串的例子: 实例 1' M; E& t) }; Q& y4 V% R
- <div id="app">" V) s5 z2 x8 d! b& I. F5 t5 P
- {{ message.split('').reverse().join('') }}
+ i8 N1 |1 l0 X5 d: | - </div>
复制代码实例 1 中模板变的很复杂起来,也不容易看懂理解。 接下来我们看看使用了计算属性的实例: 实例 2
5 \! i5 I4 Q( x* ]2 `+ n- <div id="app">! X0 [* [; R4 [2 K. Y! w3 I
- <p>原始字符串: {{ message }}</p>
3 G- b1 ^1 b' R; {. o' g$ d - <p>计算后反转字符串: {{ reversedMessage }}</p>( D A8 W9 r/ w- _2 P
- </div>
, K6 ]$ V. u9 g. q2 N5 a - 5 O7 |7 S# h) j! q5 T* |# R
- <script>
! N$ }; |# H% t, b* A/ n7 q - var vm = new Vue({
: J. Z3 P0 u0 M - el: '#app',
: e2 H- L, q9 z - data: {
$ O: h+ w) Y( y ], l& n8 A3 ` - message: 'Runoob!'# N* E( C. F" |# e/ ~
- },: ~! _' w8 e, }/ Q7 a
- computed: {
# s; o3 ?4 [ y5 ?# a1 ^4 H, O - // 计算属性的 getter2 ~# N7 {2 }6 G) N2 ?
- reversedMessage: function () {9 s3 l" w9 y" A6 v, b
- // `this` 指向 vm 实例$ |7 V& O$ A( o Y8 g& k. w
- return this.message.split('').reverse().join('')
$ G* d6 P2 g) N" T8 Z' O - }1 G3 m) [5 e5 } p8 v& s
- }
% W# x: N9 E+ O4 A - })
( p: H4 O5 @& Z6 |( y* [! q1 C - </script>
复制代码实例 2 中声明了一个计算属性 reversedMessage 。 提供的函数将用作属性 vm.reversedMessage 的 getter 。 vm.reversedMessage 依赖于 vm.message,在 vm.message 发生改变时,vm.reversedMessage 也会更新。 computed vs methods我们可以使用 methods 来替代 computed,效果上两个都是一样的,但是 computed 是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值。而使用 methods ,在重新渲染的时候,函数总会重新调用执行。 实例 3
* y7 F6 _' t3 A- f- methods: {
6 \0 m8 V' m" _* K/ t. E* {2 c; Z' J - reversedMessage2: function () {( `1 s- E0 A/ X( s6 P) l3 m
- return this.message.split('').reverse().join('')
/ F9 P2 y1 s0 M/ I. N0 W. t - }. b+ |( x, F# s/ b
- }
复制代码可以说使用 computed 性能会更好,但是如果你不希望缓存,你可以使用 methods 属性。 computed settercomputed 属性默认只有 getter ,不过在需要时你也可以提供一个 setter : 实例 4
* q/ V% m- s( h: I3 Q- var vm = new Vue({
! z3 ]+ [+ W" F9 ~ - el: '#app',
2 B2 F4 I5 H/ }/ W0 g7 l: S/ ? - data: {
6 L! N6 F; E# S' A1 z7 I, s - name: 'Google',. u! E* ^0 z! M* U5 V9 \3 o! `+ M
- url: 'http://www.google.com'
% l9 \# g% D. o - },* t3 y- Z$ N6 Z
- computed: {
5 [! K2 O: H5 w5 C; q% y) s - site: {0 o0 J0 Q4 W' V1 W) ?! E# F
- // getter8 z4 J% l5 a4 Y; M# v
- get: function () {
* F% ~: r2 l* j; x; V: z - return this.name + ' ' + this.url
9 d8 P8 L' K$ w+ `- n/ G ~ - },
- ]9 Z' C! v! A% N' |. o - // setter
, y7 h6 e$ {9 e* |9 F - set: function (newValue) {
9 {( i$ F7 g+ g3 i. s - var names = newValue.split(' ')+ }- m% d2 i7 a) ^7 L9 E3 [5 B
- this.name = names[0]
+ t! h# A/ S" Z) j5 C e - this.url = names[names.length - 1]
- t% _+ k1 Q9 u) a3 `) ` - }
# R% t0 N! A: x, P" t8 n - }
* H B5 M( T% K' t( t. u - }* e* S Q/ R( \' g; p7 a
- })" _- h8 S. I: C+ _' R
- // 调用 setter, vm.name 和 vm.url 也会被对应更新" g( P/ \# v4 q
- vm.site = '百度教程 http://www.baidu.com';
/ I- l) e% E- E. ~: Y' ]8 \ - document.write('name: ' + vm.name);+ l% g' c& e' i4 V- K b
- document.write('<br>');5 Z+ C2 \5 E; L7 k
- document.write('url: ' + vm.url);
复制代码 从实例运行结果看在运行 vm.site = '百度教程 http://www.baidu.com'; 时,setter 会被调用, vm.name 和 vm.url 也会被对应更新。3 L# p) @; x3 z+ M5 |% u
: h9 F' f! V. g K# _3 N! y6 B8 v" q3 q K S4 R& j2 `6 o
1 d: G+ i7 m$ U5 A y% t
: F* H) L W1 n1 _! M* Q; d
+ X% ?. A# o) }- o: x% g |