计算属性关键词: computed。 计算属性在处理一些复杂逻辑时是很有用的。 可以看下以下反转字符串的例子: 实例 1
) e& a; y: t2 M! f2 o2 K0 D. h- <div id="app">
5 D8 _% C% A' F7 G - {{ message.split('').reverse().join('') }}4 w& e7 T: [! I0 M- Y
- </div>
复制代码实例 1 中模板变的很复杂起来,也不容易看懂理解。 接下来我们看看使用了计算属性的实例: 实例 2
3 T! W- g' O) P9 u8 j; {- <div id="app">& x7 v: D* d; z6 _( \. q: R) D
- <p>原始字符串: {{ message }}</p>" `% h: @5 X% X* Y( b3 x
- <p>计算后反转字符串: {{ reversedMessage }}</p>/ A! D( S/ {8 y. A9 L* O; b5 E; k! U$ b: B
- </div>
7 w' r* z4 Z( ]9 J5 i- ~+ U( k M0 ~8 b - * e% V# H7 L2 N( P# S: o
- <script>
' Q( ?* l5 `6 s - var vm = new Vue({" M d6 {0 j7 [7 x5 f8 a
- el: '#app',8 V% U/ X) \3 ?
- data: {; a) O2 q" q+ X8 s1 D, y/ z
- message: 'Runoob!'$ e- I% j% @! k' k2 i* l ^
- },
6 C! U( j J3 U4 i% ?% f - computed: {
8 Z% W6 s, [# a0 F0 ? - // 计算属性的 getter
& e7 f$ K1 ~: J) C, ~: N - reversedMessage: function () {
0 V) D: M( a- t, H2 g - // `this` 指向 vm 实例, X0 p$ m2 s; o: @
- return this.message.split('').reverse().join('')
; O" l E% a. D; o( A - }
5 W; Y! `/ c4 ]& T9 V: h - }6 _& L8 l7 m A( m e) |( v8 u
- })
2 i7 B% a+ M) O: u# G; H f5 R1 t$ y - </script>
复制代码实例 2 中声明了一个计算属性 reversedMessage 。 提供的函数将用作属性 vm.reversedMessage 的 getter 。 vm.reversedMessage 依赖于 vm.message,在 vm.message 发生改变时,vm.reversedMessage 也会更新。 computed vs methods我们可以使用 methods 来替代 computed,效果上两个都是一样的,但是 computed 是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值。而使用 methods ,在重新渲染的时候,函数总会重新调用执行。 实例 3 [! H* q% i: Z) g) u! C a! E
- methods: {! m5 g+ e/ S/ G
- reversedMessage2: function () {
5 y6 B/ \: D5 Z; | - return this.message.split('').reverse().join('')
) Y0 i3 ^2 E' A7 r; B6 h8 K: t - }. [" V4 F9 s2 F+ Q$ w
- }
复制代码可以说使用 computed 性能会更好,但是如果你不希望缓存,你可以使用 methods 属性。 computed settercomputed 属性默认只有 getter ,不过在需要时你也可以提供一个 setter : 实例 4
' i. }% v4 `6 X8 c- }0 p4 X0 T. j- var vm = new Vue({
% u9 L! H# s( A" N5 T: J9 ] - el: '#app',
6 d$ z& O4 J2 R" o/ j7 v* C% H - data: {
* m; ?* G; x4 s8 }/ I0 z6 y - name: 'Google',( l. C) r" ], g8 ~9 e" S. D
- url: 'http://www.google.com': n9 f7 d0 {8 t( b( v6 h1 v
- },
w% k+ m& W& [/ e9 O - computed: {5 h8 b! O3 M) [& f2 ]2 Q
- site: {
; }# W$ J' ]4 c4 W - // getter7 p* h7 r) U2 T& X' |
- get: function () {2 e e H' z6 ]& j
- return this.name + ' ' + this.url1 S# O' W; e3 J
- },2 w) W8 p7 M5 B# t
- // setter
6 g: U) A0 }6 }1 n) ?% M5 ~. s - set: function (newValue) {
$ g5 D$ G& P2 R1 t& b8 [ - var names = newValue.split(' ')
$ R2 _+ H. I' M - this.name = names[0]4 `/ K4 q7 e/ `' Z# H1 N% c
- this.url = names[names.length - 1]
& O, R6 t/ _/ y - }
+ y9 S: m6 _. ~9 A1 s5 r, i - }
5 x7 @) G7 g0 \0 D$ U, d9 X/ Q - }3 P4 l8 F0 Z1 Q' S3 i
- })
: Y D3 k; v( D0 w* a2 h - // 调用 setter, vm.name 和 vm.url 也会被对应更新
8 U, G M9 p8 Y0 N5 F" M4 I% b - vm.site = '百度教程 http://www.baidu.com';
* J, _9 ~% s! b6 J% }4 A( u - document.write('name: ' + vm.name);) O' R) h- h7 _/ P
- document.write('<br>');, v; e+ D- S* a1 L# l
- document.write('url: ' + vm.url);
复制代码 从实例运行结果看在运行 vm.site = '百度教程 http://www.baidu.com'; 时,setter 会被调用, vm.name 和 vm.url 也会被对应更新。$ S2 d6 n6 L8 e
7 g. A, H2 w% ?7 O, R
2 i }- S# `/ _: N# @, y. j7 ~2 T7 N8 K7 U; Z
$ [ l0 A- J' n% t7 [ @8 b( }1 I8 O9 H
|