计算属性关键词: computed。 计算属性在处理一些复杂逻辑时是很有用的。 可以看下以下反转字符串的例子: 实例 12 K# @& K3 ~0 t: P3 E3 P
- <div id="app">
) b5 [. `2 y8 l/ p8 v& T p - {{ message.split('').reverse().join('') }}3 M. m' h# _1 e- c) Q
- </div>
复制代码实例 1 中模板变的很复杂起来,也不容易看懂理解。 接下来我们看看使用了计算属性的实例: 实例 2, h5 l3 |1 z; n) f. e
- <div id="app">
7 E' `& J! g, {/ d4 b+ v/ U. Q - <p>原始字符串: {{ message }}</p>; l/ J; D& t: L) F3 J# u( ?; P
- <p>计算后反转字符串: {{ reversedMessage }}</p>8 y2 X5 d8 j$ {
- </div>9 ?1 Q8 ?$ l/ p5 _+ ]
-
- f# @$ x# p* m4 _ - <script>; G7 L0 ]( ^6 S4 y6 i% D& }
- var vm = new Vue({
9 a# a: g8 {# d$ n# C1 E' b: B - el: '#app',& Y2 O: Y, Q& y2 @) g. l+ u3 A# T
- data: {
' i2 O" C$ |( V$ w' h. s; A+ H - message: 'Runoob!'4 s! y$ y" m/ g6 N! _, W
- },
3 G6 c t( d2 U& s [2 }0 H2 { - computed: {
: ]# H0 f! f& o- C. @ - // 计算属性的 getter
( o2 w% b8 z8 @: T - reversedMessage: function () {
1 r; ~: R+ y; v" w ~4 u- }" k* ^ - // `this` 指向 vm 实例4 q& L( Z6 k- H6 l* L
- return this.message.split('').reverse().join('')/ W8 U/ B: u5 k3 l+ k$ X
- }, d# h( V. i& [$ F3 k l
- }% p4 c- s3 `+ F$ L7 n
- })8 d0 V% _9 F) e% h
- </script>
复制代码实例 2 中声明了一个计算属性 reversedMessage 。 提供的函数将用作属性 vm.reversedMessage 的 getter 。 vm.reversedMessage 依赖于 vm.message,在 vm.message 发生改变时,vm.reversedMessage 也会更新。 computed vs methods我们可以使用 methods 来替代 computed,效果上两个都是一样的,但是 computed 是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值。而使用 methods ,在重新渲染的时候,函数总会重新调用执行。 实例 3
) A0 r* R7 ~/ I1 j6 I K0 ~0 o- methods: {" @% |- H4 ^% @5 O
- reversedMessage2: function () {
: Z2 N" w$ M, W l8 u8 s5 Q& T: O - return this.message.split('').reverse().join('')
# t3 J3 }- @( J - }& p6 J l. P, ]0 h7 ~5 [8 R
- }
复制代码可以说使用 computed 性能会更好,但是如果你不希望缓存,你可以使用 methods 属性。 computed settercomputed 属性默认只有 getter ,不过在需要时你也可以提供一个 setter : 实例 4. P( ~% C0 {. V0 W; N
- var vm = new Vue({2 I8 j; x- r$ o0 J2 b* l3 Z6 Q
- el: '#app',9 L% {9 w9 @$ c1 q+ O% z; [
- data: {
/ \- j# z% @- f+ l$ S - name: 'Google',
, v# G1 H1 C6 V* N - url: 'http://www.google.com'
3 {0 L" E* V0 h" \8 l - },$ A9 j [- q* m* V( D7 ~
- computed: {. O" V: {/ B1 `; l0 W8 h. z. b9 A
- site: {4 r" q. r# f# N1 g* X
- // getter6 G1 a0 [8 ^- w3 N3 `
- get: function () {
% F3 @) o/ I8 v+ b: G t; g, ~ - return this.name + ' ' + this.url3 h1 D& f) ^2 N( {; C, v# m2 S
- },
0 L: w8 Y z4 b6 g: P4 W - // setter1 ]6 e3 s3 ?$ Z1 G( Z0 C z
- set: function (newValue) {
7 U) }8 j3 c) I5 `! A+ ?+ l# [4 U+ y - var names = newValue.split(' ')3 c+ O* |/ u0 f; O. x% _
- this.name = names[0]
% V( Q4 D8 E/ g- q - this.url = names[names.length - 1]
% e2 x- E' S7 q - }
3 k5 n& Z: u. z1 Y1 N1 o6 M$ Q2 n9 j$ d - }
9 q, [, `" C8 J% o6 ~ - }
$ F% t- E' n% N+ s6 L9 u6 x - })
0 G! k; A) l1 B: U5 o+ o$ }) S# b s - // 调用 setter, vm.name 和 vm.url 也会被对应更新
0 w; m! B0 E ?1 }3 [7 E) _ - vm.site = '百度教程 http://www.baidu.com';
& t, K+ J& c# G( s7 E' t - document.write('name: ' + vm.name);' Y: j, g* y( K
- document.write('<br>');
% ^' S/ I* E1 f& a - document.write('url: ' + vm.url);
复制代码 从实例运行结果看在运行 vm.site = '百度教程 http://www.baidu.com'; 时,setter 会被调用, vm.name 和 vm.url 也会被对应更新。8 }2 {# V0 h# T' [( v) W
" e K) V J8 F( E+ F
; ?3 p7 H8 Y1 \( ^
6 O2 _3 p+ W% T8 Q7 O+ r5 X3 u0 Z! O# ?, |; I( S/ \# m
& ? |+ x C; G* ^5 q: r7 X" C5 R |