计算属性关键词: computed。 计算属性在处理一些复杂逻辑时是很有用的。 可以看下以下反转字符串的例子: 实例 1& t1 J* s6 d. b# s, R; y
- <div id="app">/ r) _ U" E" _/ `# I
- {{ message.split('').reverse().join('') }}
6 j8 i. l1 j% Z - </div>
复制代码实例 1 中模板变的很复杂起来,也不容易看懂理解。 接下来我们看看使用了计算属性的实例: 实例 2
9 Q! Z0 |3 j" `$ X+ A6 _, ?- <div id="app">- l6 M# y7 C+ I8 e6 q
- <p>原始字符串: {{ message }}</p>! s: l& `' D" ~3 l
- <p>计算后反转字符串: {{ reversedMessage }}</p>
4 Y! j; v. g2 Z5 F7 ^! w - </div>7 b X. y- A: t, r3 r
-
* z# ^( w& Q) c - <script>% ~7 E+ c, {, j8 i- P+ T
- var vm = new Vue({
/ H) D3 J3 x; p6 ?5 n* L9 Z - el: '#app',
9 y( C9 ?% B! H/ a3 m/ E) Z t - data: {
: r( i7 K a4 Y+ ^' [9 R - message: 'Runoob!'
, U. u3 F. z& G- {) o- N - },
" c E, F8 s: w$ n- s' m0 K- B) P - computed: {+ p' ?3 s7 i4 j& `9 k# V
- // 计算属性的 getter! A- l( _. m8 \6 m& W
- reversedMessage: function () {9 }! d2 [, X0 H$ C' ?% Q# h5 W) M
- // `this` 指向 vm 实例) `9 o* \( d* r7 _: \( U
- return this.message.split('').reverse().join('')
) A# ?/ r# `2 E( S' }: V - }
) g' [$ _6 V* ]3 t; |0 e - }: G: t ?, l# {3 F7 ^6 v3 r9 g
- })1 b1 G% V7 D8 G* e7 x7 k, U8 x
- </script>
复制代码实例 2 中声明了一个计算属性 reversedMessage 。 提供的函数将用作属性 vm.reversedMessage 的 getter 。 vm.reversedMessage 依赖于 vm.message,在 vm.message 发生改变时,vm.reversedMessage 也会更新。 computed vs methods我们可以使用 methods 来替代 computed,效果上两个都是一样的,但是 computed 是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值。而使用 methods ,在重新渲染的时候,函数总会重新调用执行。 实例 3 L' @- F, A0 \% q$ N
- methods: {0 i# h6 g5 g/ ^* A
- reversedMessage2: function () {9 C) F8 }9 Q% Y; X" w8 V0 h4 V& v: y
- return this.message.split('').reverse().join('')
% O, c; I& e8 i4 R+ J9 i4 O - }6 y" ~ J8 H. p7 G# k- l
- }
复制代码可以说使用 computed 性能会更好,但是如果你不希望缓存,你可以使用 methods 属性。 computed settercomputed 属性默认只有 getter ,不过在需要时你也可以提供一个 setter : 实例 49 A3 Z5 S! H s6 b
- var vm = new Vue({+ R( U- C( C# R/ a
- el: '#app',. S8 ]$ B1 L4 ~0 A7 L$ O
- data: {- h$ E- F7 W0 W( _
- name: 'Google',( V3 D: _/ S0 Y w: O
- url: 'http://www.google.com'
$ e6 M; D; }/ d+ r& M - },
`. l# _5 X! m! m& m5 B6 v - computed: {. B8 V4 K# N0 R! j, y" @$ k
- site: {
, _1 \$ i5 r' B& b( p% U. [ - // getter
& w( v4 v1 P: y( a+ a" }* W - get: function () {
$ c2 t2 g* j# X8 i - return this.name + ' ' + this.url
6 M G% x& n e9 C c; T0 p - },0 c( {) k) a( W2 A" O
- // setter8 W, m! U' ?5 Y0 S+ ?9 g
- set: function (newValue) {
, O) v9 Y. F5 `* _ - var names = newValue.split(' ')7 E/ L9 W5 G8 [" ^& Q9 f
- this.name = names[0]) j, S# f" Y3 d3 ~: n
- this.url = names[names.length - 1]4 v( X6 Q4 K: G+ f, Z* T4 t# x$ U U
- }
" e* O% s1 _& s/ m8 Q, N - }
7 e7 _& H5 V. h) F c w* M1 Z - }
9 W1 [' z" N* @- Z1 H - })
- b# F! \( K {( ^6 V+ q - // 调用 setter, vm.name 和 vm.url 也会被对应更新6 @( N) N/ h9 p4 D- B/ F
- vm.site = '百度教程 http://www.baidu.com';
8 o C. _ O. q( ] - document.write('name: ' + vm.name);/ f2 W% b! u4 f) I- P0 b7 V
- document.write('<br>');
, W0 g( K8 v0 e' y( L - document.write('url: ' + vm.url);
复制代码 从实例运行结果看在运行 vm.site = '百度教程 http://www.baidu.com'; 时,setter 会被调用, vm.name 和 vm.url 也会被对应更新。5 O6 B* C' w% v: q( S( ? V
& }/ A8 z- L3 | [* j* W; {' X2 Q% A: x+ [! u
) \4 X* ?$ \ b0 F/ |" m2 K8 Q
" g) c* y% Z- _( ~% y& O
/ _ V, \/ w/ V w |