计算属性关键词: computed。 计算属性在处理一些复杂逻辑时是很有用的。 可以看下以下反转字符串的例子: 实例 1, f. M7 Z3 c* G. C, U
- <div id="app">
- \0 H' G8 X8 h5 ]4 N - {{ message.split('').reverse().join('') }}
- w' R. e, f6 F) U* ~ - </div>
复制代码实例 1 中模板变的很复杂起来,也不容易看懂理解。 接下来我们看看使用了计算属性的实例: 实例 2' H- D* s) L- m# ^2 V; _1 E
- <div id="app">
( C3 ^' ^# q& M/ Z5 ~3 j - <p>原始字符串: {{ message }}</p>
; s0 X& s$ j( i/ `9 ` m5 y8 d# Y/ | - <p>计算后反转字符串: {{ reversedMessage }}</p>
* s' F' _- _2 n - </div>! t8 _, t4 x, d% b1 f3 I- h( Q
-
( v3 b( n/ H/ i1 Z& G - <script>. s- \3 j8 t! x- @4 o) [! s
- var vm = new Vue({. P1 s3 C9 `: @4 N4 _3 S& K
- el: '#app',1 j# J% t$ v$ v4 ]6 @+ a
- data: {
! Q N/ ^7 A; G7 j; E" P- }2 M - message: 'Runoob!'5 p3 V1 ?9 i j* e% }7 U7 j, K
- },
" J9 v. W; }0 m' R* ~ - computed: {% J; G' I9 K" U- n4 \6 r
- // 计算属性的 getter
3 U) p7 ]0 w7 H6 A1 M; [ - reversedMessage: function () {) Y- m' C3 K" `! U) X K- |1 u
- // `this` 指向 vm 实例+ ^. }- _1 n& K5 |0 L9 f
- return this.message.split('').reverse().join('')3 M5 l4 o: b$ l- Q, S$ W/ q
- }+ [# {( }$ d2 N
- }- \; t; V2 l; O
- })
& K- ~2 \* L7 i/ ^9 @$ L" o - </script>
复制代码实例 2 中声明了一个计算属性 reversedMessage 。 提供的函数将用作属性 vm.reversedMessage 的 getter 。 vm.reversedMessage 依赖于 vm.message,在 vm.message 发生改变时,vm.reversedMessage 也会更新。 computed vs methods我们可以使用 methods 来替代 computed,效果上两个都是一样的,但是 computed 是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值。而使用 methods ,在重新渲染的时候,函数总会重新调用执行。 实例 3
$ m% N9 _! F4 b4 n. @* ?) O$ x5 \( i- methods: {
2 T# \; @8 D" h# d- f7 O - reversedMessage2: function () {8 S8 C5 t4 q% L* e. ]& H7 z, E
- return this.message.split('').reverse().join('')
% A$ i: G2 a2 u! j; l8 L - }
+ I$ H" r I3 A3 R - }
复制代码可以说使用 computed 性能会更好,但是如果你不希望缓存,你可以使用 methods 属性。 computed settercomputed 属性默认只有 getter ,不过在需要时你也可以提供一个 setter : 实例 4: O# F1 p1 s$ ?2 O2 `
- var vm = new Vue({- |& z/ ]# R( o
- el: '#app',2 w$ W. c5 _8 n/ t: S0 ]* \
- data: {. K/ t; C- g# M( K1 g* m
- name: 'Google',
& |7 f3 N7 ~( m! ~( ?) a - url: 'http://www.google.com'
8 X0 K( w/ Q: s! P - },) c( ~; M _' Q6 ?
- computed: {# l# i( Z, w9 w
- site: {
: q8 X* M! l8 ?; T% [% v - // getter: O+ t$ U5 X: g3 d
- get: function () {
- f; `, _) [9 L$ ~ - return this.name + ' ' + this.url- t1 n; k/ k) I o
- },2 N. Q$ M) F4 s1 W0 I% | M4 g
- // setter1 w* W, K/ [% f3 O4 o1 w( A& z3 X
- set: function (newValue) {
5 @- ^: [+ {: x- p* K4 ` - var names = newValue.split(' ')
6 L' U, f( k$ H# R8 [ - this.name = names[0]
+ f# d4 }% \* r - this.url = names[names.length - 1]$ T# l! h6 I; @+ X
- }/ V( \/ P; H) c0 H
- }
& `2 G/ R# O$ J9 o0 v' j8 Z3 E - }2 h% Q+ H, e1 O% V5 ^- {
- })0 \, W4 b1 a/ K+ p, z: u
- // 调用 setter, vm.name 和 vm.url 也会被对应更新
9 `2 E# U7 s+ Y1 W+ } - vm.site = '百度教程 http://www.baidu.com';
2 C7 L. r# d0 D r; G - document.write('name: ' + vm.name);
: f5 O( r+ `2 ~8 d* p5 B - document.write('<br>');! R2 g* ^( v2 r8 u% {' Q; u8 w6 y
- document.write('url: ' + vm.url);
复制代码 从实例运行结果看在运行 vm.site = '百度教程 http://www.baidu.com'; 时,setter 会被调用, vm.name 和 vm.url 也会被对应更新。
- w' ~; l, n# f9 ^
4 m8 l+ G3 k! R6 |4 [- {; A
# L7 _: O+ @/ h n5 I6 l- q$ [1 j
! H5 m" j: K' B0 P. M" d+ A( q8 q9 [/ D, y/ A( @; ^
|