计算属性关键词: computed。 计算属性在处理一些复杂逻辑时是很有用的。 可以看下以下反转字符串的例子: 实例 1( h, a. n5 @5 U3 O6 n3 R
- <div id="app">
$ v# K8 J T: H* _1 C - {{ message.split('').reverse().join('') }}; i0 x4 ]' Z9 E* o9 k
- </div>
复制代码实例 1 中模板变的很复杂起来,也不容易看懂理解。 接下来我们看看使用了计算属性的实例: 实例 2
# \* r- _* ^, {: z1 Q- <div id="app">
& k! W8 A) q! w' Y - <p>原始字符串: {{ message }}</p>4 t' v6 [1 g& ~6 }% o
- <p>计算后反转字符串: {{ reversedMessage }}</p>1 p$ v D- l, M, a
- </div>
1 [, \ K, _' d - 0 `2 S& Z0 V2 t% C# e
- <script>
; S! z9 \1 ~6 Q8 O - var vm = new Vue({% _+ a" {3 V& ~" }$ B
- el: '#app',
! z# e+ e) {2 \/ k - data: {
' i8 Q: `! t+ ~! c& E( B# L4 V - message: 'Runoob!'
3 V4 ]8 S) U6 a+ d - }, V0 u8 i9 c5 _% _" l
- computed: {) S$ S8 C \# H+ g8 _
- // 计算属性的 getter# b( |. c: q Q! {
- reversedMessage: function () {
6 A- i" c, ?& N1 ] k - // `this` 指向 vm 实例
- M+ a4 L0 o. ~ - return this.message.split('').reverse().join('')
. v( p4 {, \/ L - }' q4 @6 a8 h# B! r) p6 M _- P
- }, M' {$ {& @1 S" ]
- })
3 Z9 F2 y/ _0 s4 s - </script>
复制代码实例 2 中声明了一个计算属性 reversedMessage 。 提供的函数将用作属性 vm.reversedMessage 的 getter 。 vm.reversedMessage 依赖于 vm.message,在 vm.message 发生改变时,vm.reversedMessage 也会更新。 computed vs methods我们可以使用 methods 来替代 computed,效果上两个都是一样的,但是 computed 是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值。而使用 methods ,在重新渲染的时候,函数总会重新调用执行。 实例 34 S" l5 n5 B8 i' I. i1 @
- methods: {, ?% o) e9 I/ n, W1 q) t
- reversedMessage2: function () {. X6 L. u' s/ C3 r( d
- return this.message.split('').reverse().join('')' L6 Q0 m& a( |" F
- }
) i, l! H' m" Z: j% c$ f4 l% ^7 o - }
复制代码可以说使用 computed 性能会更好,但是如果你不希望缓存,你可以使用 methods 属性。 computed settercomputed 属性默认只有 getter ,不过在需要时你也可以提供一个 setter : 实例 4
# i. u o1 q6 x* R/ X; ?( ]- var vm = new Vue({- ^* ]5 u4 H0 H; s% r- m% ]; Z1 p
- el: '#app',
4 j0 Z: w0 {3 Q! i - data: {
$ N& m; a4 Q3 |! V9 m; ? - name: 'Google',
6 u2 v+ ?% |# h" E - url: 'http://www.google.com'& `0 Z) r, Z& F" H$ V
- },
9 I0 Y3 ~; ]/ `# W7 T) _: H& _ - computed: {
6 U# m" c; ?, Z0 {- p+ n2 ^ - site: {! |- e( }6 J. e9 J3 p! S
- // getter
7 c/ c( g, ^6 a6 O* K0 | - get: function () {
, |5 K3 X8 u' _7 u4 R - return this.name + ' ' + this.url4 y7 [7 ?7 Z4 I e R7 n
- },
6 I4 j! X% _ n4 m - // setter
% A* N2 E q2 U, @ - set: function (newValue) {$ U% T! c0 C6 E: E
- var names = newValue.split(' ')% w* ~+ e, u O% H
- this.name = names[0]* N, i/ B; h. e; [. {
- this.url = names[names.length - 1]2 h6 `, V( Q' J, t, w7 P% F
- }
- I" ]4 @8 @6 [0 R. m; X! a& O' \ - }
* ]) K/ D, I& e9 d4 I: e/ l3 n- @ - }
7 z" v2 y9 j8 F/ K/ k6 D7 F - })
$ L) W8 u- F0 |7 J - // 调用 setter, vm.name 和 vm.url 也会被对应更新
# f! \( u7 i0 K4 Z - vm.site = '百度教程 http://www.baidu.com';
7 J" q, N L8 }+ c+ M# F - document.write('name: ' + vm.name);# w$ y& J3 J$ S1 c" [
- document.write('<br>');+ A- X& s9 z ?; K/ _# s) d
- document.write('url: ' + vm.url);
复制代码 从实例运行结果看在运行 vm.site = '百度教程 http://www.baidu.com'; 时,setter 会被调用, vm.name 和 vm.url 也会被对应更新。0 C5 I5 L2 W" D, G
' e8 f, J$ ` |- v
3 O0 z& D/ n R! T+ S8 R1 |, {0 d6 W7 ?" y1 A
- `) g/ n/ N2 ?" k% y+ z+ r/ r- \, q2 P7 `* _7 e7 A
|