计算属性关键词: computed。 计算属性在处理一些复杂逻辑时是很有用的。 可以看下以下反转字符串的例子: 实例 13 x+ b6 [% y/ G3 ~( b
- <div id="app">
- p' \6 ?( ]& Y0 x; t. Q# E6 I - {{ message.split('').reverse().join('') }}0 A" {: `4 X. p9 {4 @7 N
- </div>
复制代码实例 1 中模板变的很复杂起来,也不容易看懂理解。 接下来我们看看使用了计算属性的实例: 实例 25 N1 w! k: d% A. ~
- <div id="app">
* V; f6 d( ~+ [. L m( x' t - <p>原始字符串: {{ message }}</p>" C, p% E& A# `* @9 K: l4 V! @3 C
- <p>计算后反转字符串: {{ reversedMessage }}</p>
8 K7 t5 j$ Y8 o. W, R - </div>
# B7 t$ H6 W( c5 p. K -
4 w, C9 Q* ~3 F - <script>
3 l0 V+ m! g! l/ W" W% k) A - var vm = new Vue({! b, N& w) X# ?" b7 w' \; i4 Q, o
- el: '#app',
+ u! }5 h5 u* O7 l9 L - data: {
0 M; M: d* M$ F) M+ C4 Z - message: 'Runoob!'/ v# g7 b6 d) S
- },
( l3 W" w- o7 f! e) A - computed: {
+ h1 K- a; p( e1 H C/ M - // 计算属性的 getter
5 A) T8 m6 C# `4 S9 X - reversedMessage: function () {3 D4 ]: {4 y3 r$ i# M7 b0 W
- // `this` 指向 vm 实例( f& j% } `" F+ ]* o2 [
- return this.message.split('').reverse().join('')
0 H9 x% C- k: C; `- A$ ~. N" A - } {$ ^, W8 {% [$ ~
- }
: N% z5 i& @' _ - })$ M- d9 w0 H5 o# Z: N5 Y5 Z
- </script>
复制代码实例 2 中声明了一个计算属性 reversedMessage 。 提供的函数将用作属性 vm.reversedMessage 的 getter 。 vm.reversedMessage 依赖于 vm.message,在 vm.message 发生改变时,vm.reversedMessage 也会更新。 computed vs methods我们可以使用 methods 来替代 computed,效果上两个都是一样的,但是 computed 是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值。而使用 methods ,在重新渲染的时候,函数总会重新调用执行。 实例 33 ~9 W. V- A0 ]' L8 v+ p. @) n' M
- methods: {. e' f; h: V4 f0 V4 f
- reversedMessage2: function () {
0 q' \. V# M; W' V: ~1 ] - return this.message.split('').reverse().join(''), L# A" Q4 ?) w% s
- }1 ^" \0 W" K; N* [. {$ m
- }
复制代码可以说使用 computed 性能会更好,但是如果你不希望缓存,你可以使用 methods 属性。 computed settercomputed 属性默认只有 getter ,不过在需要时你也可以提供一个 setter : 实例 4' W; a2 v6 G8 x: t, U
- var vm = new Vue({
) |0 i/ w i8 l. | - el: '#app',: z0 _! t Y& X* b
- data: {
3 a0 |: x! ^. R+ W - name: 'Google',
% A- O4 e6 D* {* R - url: 'http://www.google.com'3 W) B0 a6 O1 z) _1 B0 D/ v0 F
- },2 Z0 m7 J! }. V+ q5 y( M! u
- computed: {
% R: Z, e" L% b3 V1 k( w, D - site: {
( ?" f+ ^ Z7 K" U" B - // getter: ~6 c+ _+ \) ]# @
- get: function () {& j6 b9 E+ p7 m) I# U5 V2 Z! W
- return this.name + ' ' + this.url; p8 a3 G! K9 S2 M
- },# |& X$ H8 o0 ^
- // setter4 Y x% s4 X m. g1 M: |0 T; Z5 @
- set: function (newValue) {! P4 B8 ]3 E* G- {9 e
- var names = newValue.split(' ')5 z2 E1 H. O9 f/ J0 D8 U+ Q
- this.name = names[0]
" K& w* K) M5 \9 ~3 J* n8 M - this.url = names[names.length - 1]
) w1 I, X4 _ j2 j6 m5 z - }
8 h9 E9 S$ \0 h) m1 I: i9 d - }
! m% F* q7 T) I u5 l/ [. o - }. T' O; x/ {6 ~
- })
2 E. w+ X% A: o/ q i% ^6 Y0 ~7 V8 F - // 调用 setter, vm.name 和 vm.url 也会被对应更新6 F- d; K; ?9 V8 b) g
- vm.site = '百度教程 http://www.baidu.com';, G/ `5 G) q' B/ q' V7 t9 d
- document.write('name: ' + vm.name);
$ R& h7 N e% w% w - document.write('<br>');3 `6 } O0 H; A4 _% u. U; v
- document.write('url: ' + vm.url);
复制代码 从实例运行结果看在运行 vm.site = '百度教程 http://www.baidu.com'; 时,setter 会被调用, vm.name 和 vm.url 也会被对应更新。
# C: t5 A/ A8 q P( g8 ]
( O& _" R1 G3 f, w
t% K1 d- @+ B8 d
' }4 O. F, ~* ~9 L
1 V* c0 L9 n" v* y6 B3 [" a- ?# S5 {4 W$ U) u3 {- S/ x! t6 [7 v" v0 J9 J8 c
|