cncml手绘网

标题: Vue.js 计算属性 [打印本页]

作者: admin    时间: 2018-7-4 11:00
标题: Vue.js 计算属性
计算属性关键词: computed。
计算属性在处理一些复杂逻辑时是很有用的。
可以看下以下反转字符串的例子:
实例 1
' R: _& e; f6 f; |5 F7 b1 |# L5 \
  1. <div id="app">* i, m2 Z- o' H% P. o
  2.   {{ message.split('').reverse().join('') }}* U  i" f0 u" R8 j4 m1 r+ f
  3. </div>
复制代码
实例 1 中模板变的很复杂起来,也不容易看懂理解。
接下来我们看看使用了计算属性的实例:
实例 2
: Q4 q3 r1 t8 m5 s* H5 k
  1. <div id="app">
    & o8 R# [7 @/ r( H* z: t
  2.   <p>原始字符串: {{ message }}</p>) Q) C# p' R' a4 }2 z) a5 H0 W
  3.   <p>计算后反转字符串: {{ reversedMessage }}</p>% {) m& G$ [( H7 v2 v3 w0 p& K; B
  4. </div>
    3 V, q! X  i9 ]  |
  5. ) }( V1 M+ L& Z/ h8 m) e7 f; J
  6. <script>
    / I$ Y* L! B6 D# e
  7. var vm = new Vue({) @* Y9 ^4 n$ R1 O3 F
  8.   el: '#app',' l  r  k! d3 Y
  9.   data: {- O2 W2 g+ N- O5 E1 c: I+ b
  10.     message: 'Runoob!'$ I+ d  c" {/ X- d5 V) [5 L
  11.   },. ?" J4 Y, M: u0 K
  12.   computed: {! M+ Z. `: s- F& g, s
  13.     // 计算属性的 getter9 I$ v$ ^( D# Y
  14.     reversedMessage: function () {
    . S2 g3 h3 p6 c# |" J$ w# F
  15.       // `this` 指向 vm 实例6 x( a  k' q. d/ a- t
  16.       return this.message.split('').reverse().join('')+ l0 Z/ H* X8 ^  D) x: F% R
  17.     }; b- h  \6 U5 d0 R! S
  18.   }
    ' E- _6 ^1 J$ j- ]6 o1 r
  19. })& Y& i! V4 E5 X
  20. </script>
复制代码
实例 2 中声明了一个计算属性 reversedMessage 。
提供的函数将用作属性 vm.reversedMessage 的 getter 。
vm.reversedMessage 依赖于 vm.message,在 vm.message 发生改变时,vm.reversedMessage 也会更新。

computed vs methods
我们可以使用 methods 来替代 computed,效果上两个都是一样的,但是 computed 是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值。而使用 methods ,在重新渲染的时候,函数总会重新调用执行。
实例 3/ ^5 x' N) v+ O1 T0 T
  1. methods: {: l' {4 d& D' d& U6 V2 `$ Y) y5 I6 c
  2.   reversedMessage2: function () {8 ?% m0 |" E$ W* E# p: w7 u
  3.     return this.message.split('').reverse().join('')' z5 k/ }( l9 E9 Y& J% t& P
  4.   }( u/ O( b# @8 j2 r8 H7 F' F( _0 q
  5. }
复制代码
可以说使用 computed 性能会更好,但是如果你不希望缓存,你可以使用 methods 属性。

computed setter
computed 属性默认只有 getter ,不过在需要时你也可以提供一个 setter :
实例 45 L) h, j# z& v6 `( A
  1. var vm = new Vue({
    6 f7 w3 D  L: N
  2.   el: '#app',
    2 l9 X7 S# ?5 ]% P8 H
  3.   data: {$ D- }# i; N9 K7 c' f5 Q
  4.     name: 'Google',
    9 D8 Q8 E* X* I
  5.     url: 'http://www.google.com'( H1 x- N; [. l" z6 y8 o
  6.   },9 M! _; S/ ^, l
  7.   computed: {
    % m; ?) Z: S  x+ B  F9 m
  8.     site: {1 n, q, e) I5 x/ X! f& [' c! k
  9.       // getter: u/ v, a* c1 m$ K, C9 d
  10.       get: function () {* ^: [$ p- a3 j5 Q
  11.         return this.name + ' ' + this.url7 b! w$ Y- B; ?
  12.       },
    ) B+ i6 e& c( v2 A2 `( H' N
  13.       // setter
    ' U7 v# V# A/ \5 t: T
  14.       set: function (newValue) {
    # y% z; \2 ]& X2 V
  15.         var names = newValue.split(' ')
    3 x" }" p5 t6 g/ I8 t
  16.         this.name = names[0]' Q: e1 ^3 c7 J. R  i
  17.         this.url = names[names.length - 1]
    4 v" q9 {/ n% J6 W' a
  18.       }- N1 H% T3 X7 @7 Z4 r( l
  19.     }, _* `. j/ u* k" O7 h
  20.   }
    ; M$ e7 Z8 O7 B+ Y/ H6 j; a
  21. })% A( Q9 i9 {9 D7 Y; @
  22. // 调用 setter, vm.name 和 vm.url 也会被对应更新
    6 F+ A+ v' q$ b% d5 h
  23. vm.site = '百度教程 http://www.baidu.com';
    % j1 g) W( K% y- v- E: _6 B* ?
  24. document.write('name: ' + vm.name);5 K8 c( y* F5 n
  25. document.write('<br>');; n: b" T' z% F
  26. document.write('url: ' + vm.url);
复制代码
从实例运行结果看在运行 vm.site = '百度教程 http://www.baidu.com'; 时,setter 会被调用, vm.name 和 vm.url 也会被对应更新。
! V( [) Y3 V9 g) Z' D
1 F" D2 ]$ J1 |: K4 B
9 p6 t" k3 Y$ a0 M+ Z5 ~! f; s9 B8 ?# N, v1 C
3 F( N  ]% {+ S* _6 J/ Q

3 q& `: u" ^5 T' K




欢迎光临 cncml手绘网 (http://bbs.cncml.com/) Powered by Discuz! X3.2