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

QQ登录

只需一步,快速开始

 找回密码
 立即注册

QQ登录

只需一步,快速开始

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

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

[复制链接]
跳转到指定楼层
楼主
发表于 2018-7-4 11:00:16 | 只看该作者 |只看大图 回帖奖励 |正序浏览 |阅读模式
计算属性关键词: computed。
计算属性在处理一些复杂逻辑时是很有用的。
可以看下以下反转字符串的例子:
实例 1
* [& R! G! |* u9 B) g# z
  1. <div id="app">1 D3 i8 u  R& P+ H! G7 d' Q6 h+ |
  2.   {{ message.split('').reverse().join('') }}+ b  {2 g6 O+ z) X0 H. C
  3. </div>
复制代码
实例 1 中模板变的很复杂起来,也不容易看懂理解。
接下来我们看看使用了计算属性的实例:
实例 2
+ s2 C* _, z" j- u
  1. <div id="app">
    ' }# B% \! f: {( d# B
  2.   <p>原始字符串: {{ message }}</p>$ L" U  m: I+ b+ @( v/ |
  3.   <p>计算后反转字符串: {{ reversedMessage }}</p>
    # e& X; n+ b$ Y0 f! G) O
  4. </div>/ {: d8 h+ S5 _- q' f

  5. 8 d5 \$ o1 k' k& U1 G
  6. <script>. p- [# _" E; O7 f
  7. var vm = new Vue({+ H& R8 U* J% m2 i% h$ c; ]& k
  8.   el: '#app',' l, c; f* X/ o' D* n
  9.   data: {0 l$ h$ g( C! l7 `# P
  10.     message: 'Runoob!'
    $ \! s6 E- O& h5 y# v
  11.   },
    / K. P. R3 x6 e9 T
  12.   computed: {
    4 z# [5 ^& O: Z4 C: H0 {4 R
  13.     // 计算属性的 getter( B! Q- W. A9 ~2 |
  14.     reversedMessage: function () {3 n5 Z. V% E" ~0 m% j6 A+ J
  15.       // `this` 指向 vm 实例+ Y: b9 v" i0 C3 B
  16.       return this.message.split('').reverse().join('')8 `/ R7 m& I5 u9 U) [5 r9 ]1 ~
  17.     }/ z3 u" h- D/ [! m% ^
  18.   }
    * b4 f0 l3 l& x. Z
  19. })* {) d' k. j" U! B. n
  20. </script>
复制代码
实例 2 中声明了一个计算属性 reversedMessage 。
提供的函数将用作属性 vm.reversedMessage 的 getter 。
vm.reversedMessage 依赖于 vm.message,在 vm.message 发生改变时,vm.reversedMessage 也会更新。

computed vs methods
我们可以使用 methods 来替代 computed,效果上两个都是一样的,但是 computed 是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值。而使用 methods ,在重新渲染的时候,函数总会重新调用执行。
实例 3
& q/ ~" `; |8 q8 X  `
  1. methods: {- y- v+ F* o3 ^) P
  2.   reversedMessage2: function () {
    2 f  V  I: Q; ]: T! T/ \# I
  3.     return this.message.split('').reverse().join('')' U# P/ Z$ S) s( ?/ v
  4.   }2 i, X9 |8 r0 ?. W2 o( E
  5. }
复制代码
可以说使用 computed 性能会更好,但是如果你不希望缓存,你可以使用 methods 属性。

computed setter
computed 属性默认只有 getter ,不过在需要时你也可以提供一个 setter :
实例 4
% y& h5 o/ ]( r7 o% o
  1. var vm = new Vue({
    ; B- d- P7 E% E0 k+ y
  2.   el: '#app',
    9 }2 `6 e  L6 h; b2 W
  3.   data: {  d& u( d! V3 F3 A8 @
  4.     name: 'Google',; U8 G& _+ s5 ]1 n8 S- f( P
  5.     url: 'http://www.google.com'% O# J! u2 J! {7 U
  6.   },
    3 O* o" V7 x9 X! Q8 k1 }: [
  7.   computed: {& O! L  y# e9 Y
  8.     site: {
    # b* y/ v3 T/ d+ T3 [2 r# b: {8 ^
  9.       // getter! ~* v0 [8 p3 z$ b# V2 z* a
  10.       get: function () {
    $ Y: q& T- ?- t& I' W& i
  11.         return this.name + ' ' + this.url; F8 q" p& @1 p0 ~
  12.       },
    # o/ ]! p+ W- z0 G
  13.       // setter# e) ~. X3 @1 l  @& S7 i& U: T% Q5 ]; g
  14.       set: function (newValue) {
    * M: _" g" Q$ l' d
  15.         var names = newValue.split(' ')1 a3 M4 H, o. S+ R
  16.         this.name = names[0]
    5 J5 t, J1 A5 Y- \
  17.         this.url = names[names.length - 1]& |/ X& f1 y8 _/ d/ B: w
  18.       }
    , g) ?4 k' I1 F3 l9 v1 L7 p$ K. `
  19.     }! f" R4 b1 n1 M- j/ A
  20.   }
    ) I/ v7 q! T8 S4 t. h
  21. })% r9 }: @' i2 i$ q- y' G  w' @
  22. // 调用 setter, vm.name 和 vm.url 也会被对应更新* H3 i/ D* r0 [) g+ |7 {% Z
  23. vm.site = '百度教程 http://www.baidu.com';
    9 {$ M' |; v2 v) y
  24. document.write('name: ' + vm.name);% j0 w7 v5 E, E% w
  25. document.write('<br>');7 v* s( `2 m) v+ ~' G
  26. document.write('url: ' + vm.url);
复制代码
从实例运行结果看在运行 vm.site = '百度教程 http://www.baidu.com'; 时,setter 会被调用, vm.name 和 vm.url 也会被对应更新。
  z+ G! l3 f, {- G$ o " k( d8 S; j+ R0 ]

" v+ c% G  |6 w9 z! {
7 Q* b; {4 S" |4 u+ }% R
& g: C9 `0 J( m+ D. V, O" X% r6 }
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 支持支持 反对反对
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

GMT+8, 2026-8-4 12:44 , Processed in 0.059983 second(s), 23 queries .

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