|
计算属性关键词: computed。 计算属性在处理一些复杂逻辑时是很有用的。 可以看下以下反转字符串的例子: 实例 1
' |# d& J7 X+ X4 x4 t- <div id="app">
4 {5 C* d& W* E/ v6 j3 v s- t - {{ message.split('').reverse().join('') }}2 c6 w( t3 @4 x4 @5 O
- </div>
复制代码实例 1 中模板变的很复杂起来,也不容易看懂理解。 接下来我们看看使用了计算属性的实例: 实例 2
: q2 |( r9 `& G8 }3 {9 Q# S$ X- <div id="app">
9 ~' X$ F$ M8 s r+ S2 [ - <p>原始字符串: {{ message }}</p>
$ ]4 l: X% h7 K" W+ q - <p>计算后反转字符串: {{ reversedMessage }}</p>
, Q- S' q- T" a- l5 Y - </div>
; E. A8 |$ @3 ~" N& h( a, I - ! [( b' O+ x6 D4 o2 M
- <script>9 h8 J: a2 ^4 G$ Z
- var vm = new Vue({
" F7 w% ]2 |/ s8 n" {' p; Y - el: '#app',
) v6 s8 d# r% w( g7 O, t - data: {
) P7 s W# P) N2 U% y" c* [ - message: 'Runoob!'
. z+ i1 n- N" A$ k/ y4 u6 ?! Q; V - },
( o% r* J+ a6 v) k% S - computed: {6 J0 m. e2 d* \9 E
- // 计算属性的 getter
( m$ K/ ^# m- ? I. a' J6 | - reversedMessage: function () {
2 U, M R6 Y6 B5 q: B - // `this` 指向 vm 实例
' }, [/ d% B% x" H3 I5 F - return this.message.split('').reverse().join('')
5 D6 k$ r. a0 \- k1 o& ~: R7 F( G - }
9 ]9 d+ d: K j% |$ A. R - }
! j6 P8 ]' b% r; D A - })1 l9 O' g( ]% w8 C6 R+ S
- </script>
复制代码实例 2 中声明了一个计算属性 reversedMessage 。 提供的函数将用作属性 vm.reversedMessage 的 getter 。 vm.reversedMessage 依赖于 vm.message,在 vm.message 发生改变时,vm.reversedMessage 也会更新。 computed vs methods我们可以使用 methods 来替代 computed,效果上两个都是一样的,但是 computed 是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值。而使用 methods ,在重新渲染的时候,函数总会重新调用执行。 实例 3" q; P3 W2 e9 N& k- _& f) P' I
- methods: {) o, D; q4 Q" U# S! n, h: ?8 D
- reversedMessage2: function () {
0 g0 m; E* H1 e5 x( D' i: ~ - return this.message.split('').reverse().join('')
* m5 e# t% R% N! j) z - }
" u) x, L" ~' p8 b% S: y3 o - }
复制代码可以说使用 computed 性能会更好,但是如果你不希望缓存,你可以使用 methods 属性。 computed settercomputed 属性默认只有 getter ,不过在需要时你也可以提供一个 setter : 实例 4
0 b+ C8 k) ]% T: i7 L3 h- var vm = new Vue({
0 f j% i% U. r( ^ - el: '#app',5 i" s6 ^# ~/ E& R+ F$ x
- data: {4 E1 [; R; Z, @4 [
- name: 'Google',: ~+ f; Y6 ]' D5 I% H* t
- url: 'http://www.google.com'$ N' [) z0 t: k7 K2 y
- },
0 Y& Z: k- T1 m- l7 [ v; [ - computed: {" ^4 c3 q. l W |
- site: {
5 {, e/ d! `7 b6 O; K0 n - // getter
8 f& J0 \5 M: a - get: function () { L7 t2 h* ~: h7 d' c
- return this.name + ' ' + this.url
6 S8 K: c( ^5 O# \ - },' O3 c; Q# s4 \9 g
- // setter* G- w5 `! G) v- R" E
- set: function (newValue) {6 A* C E+ Q6 ]. A2 R
- var names = newValue.split(' ')
4 D W( u* l! x( J& n - this.name = names[0]- `/ r! N, L2 c5 _, S
- this.url = names[names.length - 1]
1 T U ^3 Z2 q, h" O) ?% X0 p! r - }
3 b) T$ Q6 x5 B' ^, g! g) D" o& d - }
* q. o) ^! v6 U8 |# r% q - }+ w- y: b2 ]+ E0 t
- })/ @* [: ?, H' o+ n5 s) R. E
- // 调用 setter, vm.name 和 vm.url 也会被对应更新 @# k$ D6 y8 ~' v9 S6 @
- vm.site = '百度教程 http://www.baidu.com';
, J4 n0 o) @0 t: l3 s/ [' x - document.write('name: ' + vm.name);
6 n; J$ M. {' p' R - document.write('<br>');
, S; M) b+ n# J - document.write('url: ' + vm.url);
复制代码 从实例运行结果看在运行 vm.site = '百度教程 http://www.baidu.com'; 时,setter 会被调用, vm.name 和 vm.url 也会被对应更新。/ r) m1 }1 v, I9 T& C. }
% K1 {4 ~! y! y% X# `" l7 o
- N) v; f! S, g( Z9 e3 [# d
, I( }+ T. ^, s( D0 m7 Z* b
1 _# I+ N9 a. z# d6 I2 V( W# u4 r* `, g* i6 v' F7 F# D1 H
|