计算属性关键词: computed。 计算属性在处理一些复杂逻辑时是很有用的。 可以看下以下反转字符串的例子: 实例 1
2 R+ \/ S6 ?+ Z! e- <div id="app">
, ]: a0 L/ ]' O j& \- J - {{ message.split('').reverse().join('') }}& U+ U& F$ A$ D @
- </div>
复制代码实例 1 中模板变的很复杂起来,也不容易看懂理解。 接下来我们看看使用了计算属性的实例: 实例 2' Z* f4 K" I" O0 x- u/ F6 v
- <div id="app"># `, W6 O& r( ]5 x- v( ^+ M
- <p>原始字符串: {{ message }}</p>& t2 L0 ]4 l% O7 _
- <p>计算后反转字符串: {{ reversedMessage }}</p>5 G4 n4 r! \, ~& p8 S" g
- </div>
6 ]1 t8 t; F" t# g, h- w -
' B+ l3 W F8 d% }5 t - <script>
j; r! w8 ~* D' N6 J3 X! K - var vm = new Vue({# A1 M, I! o7 [/ v. _/ @; s
- el: '#app',: L4 ]* F3 w/ O# g" D& }
- data: {
- C6 t4 ?2 k$ x; P" I - message: 'Runoob!'7 J' O0 j( r: V% K. _4 ]
- },, S2 Y. S, d" M/ X4 f
- computed: {
( M$ G; M- ~3 W - // 计算属性的 getter( R4 |* Z3 s! `3 {8 K4 K
- reversedMessage: function () {
& i. E/ K1 P) B0 {( V/ P2 K* }8 m - // `this` 指向 vm 实例
/ U) I: b. d: z! G - return this.message.split('').reverse().join('')
3 i/ j+ s6 {+ c8 w7 R) e n" N - }% v; Y% ^ Q* R, ^
- }( p; h: I" N$ ]) d- ]
- })$ z8 Q. l' u" ^" L, ^) y
- </script>
复制代码实例 2 中声明了一个计算属性 reversedMessage 。 提供的函数将用作属性 vm.reversedMessage 的 getter 。 vm.reversedMessage 依赖于 vm.message,在 vm.message 发生改变时,vm.reversedMessage 也会更新。 computed vs methods我们可以使用 methods 来替代 computed,效果上两个都是一样的,但是 computed 是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值。而使用 methods ,在重新渲染的时候,函数总会重新调用执行。 实例 3
^8 T6 t1 J% T% A8 h2 i& x- methods: {8 d! V7 C9 B3 B4 v9 ~
- reversedMessage2: function () {
' Q/ h, V+ Z3 z4 D! B% @( s - return this.message.split('').reverse().join('')+ _' l/ r; k8 ~/ r
- }
3 _% t% m, {. T2 b. e# A9 a - }
复制代码可以说使用 computed 性能会更好,但是如果你不希望缓存,你可以使用 methods 属性。 computed settercomputed 属性默认只有 getter ,不过在需要时你也可以提供一个 setter : 实例 4
! ~( V. _. c9 h9 Z* a0 K( R- var vm = new Vue({: j1 Y' O0 A/ o# C0 P# P
- el: '#app',
+ N3 \# o, e( \ - data: {4 w% o w; A/ @4 _& q' O7 C) u
- name: 'Google',
I" h% z9 y2 }9 q* n" Y; V% e - url: 'http://www.google.com'
6 y' D2 }, {! e# I" U ] - },
8 a G$ b/ N# m+ B8 ?1 C% x1 { - computed: {
- c9 Z' V* A% ~ ^ - site: {' m; ?5 k3 Q9 k: c v4 d* {
- // getter
0 J# L& c3 Q% G: }+ u - get: function () {2 K0 ?0 U! h. S c7 C, A( W
- return this.name + ' ' + this.url# q6 Y6 ^, {1 { B4 _
- },# X, ]' \: v) ^8 Q
- // setter
+ w! s9 t) `' I. f' b r - set: function (newValue) {
% l- P) W2 G- X6 }% J$ e - var names = newValue.split(' ')
3 p2 Q% i# L } - this.name = names[0]
: i9 E; B2 S# M7 r1 I1 h+ h: n* s - this.url = names[names.length - 1]3 ^1 n4 g3 a e3 R% f& e) W
- }& |5 \5 g1 \5 h
- }
% p/ T) q) @# a# o* y2 J - }
. B5 [* ^$ J# O' u" O/ O/ O- w - })
6 P h* c& S2 w* ]. {2 Z - // 调用 setter, vm.name 和 vm.url 也会被对应更新% i4 v' `( K# i+ m
- vm.site = '百度教程 http://www.baidu.com';2 z4 w' R( o+ d+ n- A" G- U+ S
- document.write('name: ' + vm.name);1 |, }+ I4 s# Q M; r
- document.write('<br>');
2 Z3 F: X: E$ N* A7 D, A - document.write('url: ' + vm.url);
复制代码 从实例运行结果看在运行 vm.site = '百度教程 http://www.baidu.com'; 时,setter 会被调用, vm.name 和 vm.url 也会被对应更新。
: i. @/ b1 ]! r; n, ]+ g5 s
8 W3 c% N. P; @( P/ N1 Y, x
/ s9 W1 V- j( u; E: i/ o' L0 y: k' [% |+ Q
/ d. E1 n2 T6 i# s, @ X1 p$ ~6 Y) Z) m! ?
|