您尚未登录,请登录后浏览更多内容! 登录 | 立即注册

QQ登录

只需一步,快速开始

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 15750|回复: 0
打印 上一主题 下一主题

[Vue.js] Vue.js 计算属性

[复制链接]
跳转到指定楼层
楼主
发表于 2018-7-4 11:00:16 | 只看该作者 |只看大图 回帖奖励 |倒序浏览 |阅读模式
计算属性关键词: computed。
计算属性在处理一些复杂逻辑时是很有用的。
可以看下以下反转字符串的例子:
实例 1& p5 N; B1 L3 R
  1. <div id="app">
    7 p, q- I$ p! X9 Q7 K% P: A9 N
  2.   {{ message.split('').reverse().join('') }}
    2 ?7 W) T6 }: o8 l# ~* |+ ?
  3. </div>
复制代码
实例 1 中模板变的很复杂起来,也不容易看懂理解。
接下来我们看看使用了计算属性的实例:
实例 2
6 S; Q2 G" A+ E7 Z8 u3 p) @2 a
  1. <div id="app">
    3 Q) p: ?) f" I* ^6 L7 Q+ B
  2.   <p>原始字符串: {{ message }}</p>
    2 Y. y% @3 h2 O  r( q5 V
  3.   <p>计算后反转字符串: {{ reversedMessage }}</p>. ~7 D1 ^$ S. n8 |  }* E; a: B! R
  4. </div>
    ) x9 V0 ^# j4 r( p6 \! G6 V

  5. " `9 K  e" l) }! i( w
  6. <script>
    8 k/ x  k1 o9 C% h* R
  7. var vm = new Vue({, [3 j5 {2 I& s2 y8 f. C- S
  8.   el: '#app',: C- q: _: [5 ^0 ]4 x8 f
  9.   data: {4 ^$ ^% R& s" b- j( S+ J
  10.     message: 'Runoob!'
    , X! g$ K  Y( f4 j
  11.   },
    3 o0 k$ N0 O) h" I+ C* I3 P  d
  12.   computed: {2 L, o6 P& y+ ]; q* z
  13.     // 计算属性的 getter
    , v  j# o3 R% |; j. ~5 |3 W; R6 `
  14.     reversedMessage: function () {8 k9 {  S" }2 X0 U) ]
  15.       // `this` 指向 vm 实例
    8 B3 e! U+ I2 c, C; g  n
  16.       return this.message.split('').reverse().join('')
    ) Y4 O8 a8 e0 ]( M" B0 R9 M
  17.     }
    # Z0 t+ \# C4 P/ q. j* n
  18.   }) T* Z+ u. `9 x; Q& `) h
  19. })( w& v+ f( G; [! \
  20. </script>
复制代码
实例 2 中声明了一个计算属性 reversedMessage 。
提供的函数将用作属性 vm.reversedMessage 的 getter 。
vm.reversedMessage 依赖于 vm.message,在 vm.message 发生改变时,vm.reversedMessage 也会更新。

computed vs methods
我们可以使用 methods 来替代 computed,效果上两个都是一样的,但是 computed 是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值。而使用 methods ,在重新渲染的时候,函数总会重新调用执行。
实例 3
2 F% d( i5 i- W9 o/ A- T/ t
  1. methods: {/ z( [7 y  [: s* }- Q
  2.   reversedMessage2: function () {
    " i0 M9 M4 T2 W& z9 j; b
  3.     return this.message.split('').reverse().join('')
    6 \4 t" p- g: f& g
  4.   }* u& Q: g" `- `* @
  5. }
复制代码
可以说使用 computed 性能会更好,但是如果你不希望缓存,你可以使用 methods 属性。

computed setter
computed 属性默认只有 getter ,不过在需要时你也可以提供一个 setter :
实例 4
3 V) c; z4 }1 f
  1. var vm = new Vue({
    ( ^8 z$ e9 d" Z* h
  2.   el: '#app',
    $ M/ v4 ]. C  ~: W- t/ f; G, T
  3.   data: {! Z% f0 Y2 e% U' i* K) ^
  4.     name: 'Google',
    " _! V5 `( e" T0 I5 [3 w8 c
  5.     url: 'http://www.google.com'
    $ J; T+ I$ @7 w
  6.   },) v- G( k" ^! \. r) ?/ B9 r
  7.   computed: {
    + z5 l) |4 ^5 F$ y5 D2 Q! J" A
  8.     site: {
    + s  }  w9 }8 H( k
  9.       // getter4 y# G9 O0 j, ]9 ~9 H+ F( R
  10.       get: function () {9 B- X) |/ n9 L
  11.         return this.name + ' ' + this.url" F& S9 l% H+ V, o1 P/ {5 w" s# v
  12.       },
    * \) [( M5 V% b7 |
  13.       // setter# l; Q$ q% m( s2 Q
  14.       set: function (newValue) {) R5 J( M3 g* E. y# D$ Q' y8 N" ]. u
  15.         var names = newValue.split(' ')
    3 t4 \; v0 _9 I8 `! A
  16.         this.name = names[0]3 S' U  c4 g7 h8 Y4 K8 z
  17.         this.url = names[names.length - 1]
    4 [" N& k% Q! g8 t
  18.       }
    ; M' ]) Z" G8 ~4 i2 {5 v0 [( V
  19.     }6 y% `7 V6 H1 M2 z7 R
  20.   }7 i# q) r5 P: u. H2 d
  21. })
    + b3 w) f- F" G2 C
  22. // 调用 setter, vm.name 和 vm.url 也会被对应更新0 J* f# @! z9 a0 g! G+ o
  23. vm.site = '百度教程 http://www.baidu.com';- c  {5 J' p. Q" n0 X/ A" ~
  24. document.write('name: ' + vm.name);$ O7 T/ L9 ~: y  ]! [4 Q4 I
  25. document.write('<br>');
    3 x0 Z6 T! q/ j% S. B, X5 G6 t5 V: Y
  26. document.write('url: ' + vm.url);
复制代码
从实例运行结果看在运行 vm.site = '百度教程 http://www.baidu.com'; 时,setter 会被调用, vm.name 和 vm.url 也会被对应更新。7 C/ h% J4 @+ s8 F; k

) \3 q& M! V7 A6 ^/ M1 `- r
9 q) N" p) m4 G9 k, H; A$ v; v3 |5 I( P  H, J5 E

7 {7 w( Y9 T. N4 g4 V% S9 M3 D
, J! S; c* j. {/ x8 a, \
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 支持支持 反对反对
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

GMT+8, 2026-3-16 18:10 , Processed in 0.079191 second(s), 22 queries .

Copyright © 2001-2026 Powered by cncml! X3.2. Theme By cncml!