计算属性关键词: computed。 计算属性在处理一些复杂逻辑时是很有用的。 可以看下以下反转字符串的例子: 实例 10 ^6 N9 h' g e- V4 \8 ~
- <div id="app">
) C Y( K' f* z8 ]& H - {{ message.split('').reverse().join('') }}
9 K6 i7 a. Z1 N; D. D$ I - </div>
复制代码实例 1 中模板变的很复杂起来,也不容易看懂理解。 接下来我们看看使用了计算属性的实例: 实例 20 B" y W' E" P+ v% R+ o
- <div id="app">9 q1 W6 c0 t9 X8 N7 y* c
- <p>原始字符串: {{ message }}</p>; k- j* ?, o. g2 W/ \* U
- <p>计算后反转字符串: {{ reversedMessage }}</p>
' L8 ~- L& M4 L# M* K4 L; o - </div>: m: ~" G8 V) O+ w4 R
-
3 `! N: w: N8 L* l; q1 I2 [ d# R: X - <script>
/ x4 C. |( ? @& L& f; R5 c - var vm = new Vue({
+ {- L# v k! c5 k+ w3 c; Z& ?$ C, w - el: '#app',2 ^/ q$ _1 u; R) ^- @
- data: {9 A: [, ]* s" w# Z' l- d
- message: 'Runoob!'
( u# F4 I& }* V6 \/ E- ?! B - },
$ v. H8 O1 ~6 A$ Q9 t0 ~ i9 p - computed: {0 x* z/ _; \# n+ E3 B. ?4 B* ?
- // 计算属性的 getter
7 f3 X' J6 U+ J - reversedMessage: function () {
2 U/ X6 W# e% G; k3 f( B' Y - // `this` 指向 vm 实例
: L z: r3 o- `5 K X0 ~ - return this.message.split('').reverse().join('')
& D3 v) T8 @& T: }% ~% V9 H - }
/ }; e. ~. x( T( D4 I* l! s" W$ b. ] - }
. Z( p9 w9 a& i; G - })
, Y9 w# W% t! a - </script>
复制代码实例 2 中声明了一个计算属性 reversedMessage 。 提供的函数将用作属性 vm.reversedMessage 的 getter 。 vm.reversedMessage 依赖于 vm.message,在 vm.message 发生改变时,vm.reversedMessage 也会更新。 computed vs methods我们可以使用 methods 来替代 computed,效果上两个都是一样的,但是 computed 是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值。而使用 methods ,在重新渲染的时候,函数总会重新调用执行。 实例 3
# z% j" m9 Q" `" U! ~1 q. E& F* V- methods: {
. p9 U! V7 C/ O7 p - reversedMessage2: function () {, |6 t* K L$ R
- return this.message.split('').reverse().join('')
/ H$ q# T# E3 [" Z& { - }
- f8 s2 K @ C$ ^- {7 w - }
复制代码可以说使用 computed 性能会更好,但是如果你不希望缓存,你可以使用 methods 属性。 computed settercomputed 属性默认只有 getter ,不过在需要时你也可以提供一个 setter : 实例 4
3 k# L/ i3 ^3 ^" I! T+ T- var vm = new Vue({
6 \1 E. w. B' U7 a! A! v% x8 H) ~1 T - el: '#app',
" o1 _+ e4 i1 P9 j/ w9 Q" O - data: {9 J% G0 F3 V, f. w! d- s8 G/ u9 l5 ~
- name: 'Google',
* d0 C- N4 e) d% M5 d8 @* s4 ] - url: 'http://www.google.com', K2 G3 E: e2 u
- },1 v! ^* Q' K# j+ x
- computed: {7 E3 [% d9 b3 T
- site: {
% z+ n- h" i( t - // getter
; e& ` p9 i. q$ J( O - get: function () {, ~. M" X7 o: P9 Z
- return this.name + ' ' + this.url# n$ Z3 ^$ I! }3 H3 R, B/ r, Q" g( G
- },) | E2 x9 N b; C% C) z
- // setter# S3 N) j3 a' f5 V1 H
- set: function (newValue) {6 q! t5 y. T: w3 E1 Q# A! D, J. k
- var names = newValue.split(' ')
0 K- T& e$ c1 m6 J$ Q; g - this.name = names[0]
6 z5 _: W' m, V6 Q. \! q - this.url = names[names.length - 1]4 ?) U( K% r$ A. R9 i
- }
3 ?9 o! r- O" O - }
3 j" ^/ z/ u+ p& s* ?1 J) E - }
5 r4 l S& v9 E. ^ - })
6 g9 s- v6 y; F' K2 ]& _$ f - // 调用 setter, vm.name 和 vm.url 也会被对应更新0 [' j* w ]- s2 y3 N
- vm.site = '百度教程 http://www.baidu.com';
4 m5 O* ~$ _9 b3 w5 p* X3 P' ^ - document.write('name: ' + vm.name);
N: E" G; U! K- ~% S8 J4 v - document.write('<br>');
0 J5 x: q/ U! z - document.write('url: ' + vm.url);
复制代码 从实例运行结果看在运行 vm.site = '百度教程 http://www.baidu.com'; 时,setter 会被调用, vm.name 和 vm.url 也会被对应更新。/ F2 R: n4 @# Z$ s5 f2 M
! R9 t' Q* h/ j; f; N" |/ ]
/ j. r# k, Q1 f/ p; m- n m) x. r9 p
" U$ b: p* {! @) u" |9 k+ d) u' ~, _; ~, u1 e" h
|