cncml手绘网

标题: Vue.js 计算属性 [打印本页]
作者: admin    时间: 2018-7-4 11:00
标题: Vue.js 计算属性
计算属性关键词: computed。
计算属性在处理一些复杂逻辑时是很有用的。
可以看下以下反转字符串的例子：
实例 1
4 g( j" ^4 _  n/ P& v
  1. <div id="app">' i, w+ O* X% M5 u
  2.   {{ message.split('').reverse().join('') }}# ?- T* u- {  E4 \: @. T, I, c1 i3 t
  3. </div>
复制代码
实例 1 中模板变的很复杂起来，也不容易看懂理解。
接下来我们看看使用了计算属性的实例：
实例 2
% G- T  b* u% I1 F
  1. <div id="app">
    # @6 |1 [: D* g1 @- c8 v) G
  2.   <p>原始字符串: {{ message }}</p>& G6 ~6 }" L4 R& \6 ]5 Z
  3.   <p>计算后反转字符串: {{ reversedMessage }}</p>
    & T! A# e. @6 {) ?; M
  4. </div>
    " A2 S/ `! E3 Y/ Z6 ^7 u, f2 k

  5. / r0 F7 z9 i2 g
  6. <script>
    # V3 O, {2 x$ N& F& E& t# |/ O# F
  7. var vm = new Vue({6 P) E5 B6 ~- i- G4 L: G: n7 Y
  8.   el: '#app',1 w5 s3 O' b. h9 m7 j% o/ G
  9.   data: {( H5 f$ A8 m3 ?0 N' A
  10.     message: 'Runoob!'
    3 i  l& ^* \2 Q% ?& T1 e0 _
  11.   },9 w" ?, s0 q% z+ O2 P# Y5 p1 k, i: {2 m
  12.   computed: {, b$ j, b: @; ^7 a' ~: _; p: _
  13.     // 计算属性的 getter5 s) N( z" O0 f5 M* ?$ \$ U
  14.     reversedMessage: function () {! p& a8 L3 d9 ]6 P
  15.       // `this` 指向 vm 实例
    ) H4 O# ]! y2 ^7 u
  16.       return this.message.split('').reverse().join('')% A; P% v% q& I5 p3 {' t; X
  17.     }
    0 M  q( Z! @4 y4 f( y! b' C( F- x# q5 }* e
  18.   }6 c! c, h4 M5 M  i1 Y# k
  19. })
    / k1 M% Y6 i5 u5 m  ~' q; _9 ?3 @. O
  20. </script>
复制代码
实例 2 中声明了一个计算属性 reversedMessage 。
提供的函数将用作属性 vm.reversedMessage 的 getter 。
vm.reversedMessage 依赖于 vm.message，在 vm.message 发生改变时，vm.reversedMessage 也会更新。
computed vs methods
我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。
实例 3( r& u7 X0 z" E; v
  1. methods: {
    ' j4 a% Y% @1 k) i6 O6 D
  2.   reversedMessage2: function () {
    + b6 Y6 }2 U/ }& G& K1 k7 Z
  3.     return this.message.split('').reverse().join('')3 r- g0 D5 I# r' ^- @0 U6 r
  4.   }$ L; G  Q$ Y4 G* D4 q
  5. }
复制代码
可以说使用 computed 性能会更好，但是如果你不希望缓存，你可以使用 methods 属性。
computed setter
computed 属性默认只有 getter ，不过在需要时你也可以提供一个 setter ：
实例 4+ w" m4 G3 L3 L
  1. var vm = new Vue({
    5 h' Q5 H# i, s8 q
  2.   el: '#app',7 z6 P7 k4 I+ K+ ^) U# t) T4 e
  3.   data: {6 f3 b' V0 F4 c1 B8 H
  4.     name: 'Google',
    ! e4 _# m) h& i, q/ k# B8 @
  5.     url: 'http://www.google.com'$ b9 j  x+ b) \/ s  K5 Y
  6.   },& f# g* w0 L( j' B3 c; p* F
  7.   computed: {
    * Q. L4 a* m# t& n; ^
  8.     site: {
    $ X$ c$ u+ D+ u. B
  9.       // getter
    8 Q3 n) K* b: i  V
  10.       get: function () {
    % q# S: ]# m/ k5 l) {
  11.         return this.name + ' ' + this.url
    9 J7 P+ r, ]4 J
  12.       },
    / b- D+ i. ~1 s% q/ X+ ?" D
  13.       // setter
    ! U% c# G9 S0 ]8 \" b- g
  14.       set: function (newValue) {
    ; z2 P/ r: }6 V" {
  15.         var names = newValue.split(' ')) }7 o! b1 z( K1 s1 f3 ~" s
  16.         this.name = names[0]
    + M3 x+ P. `0 V* |! z6 T
  17.         this.url = names[names.length - 1]7 x3 V; u4 N1 t* i; M
  18.       }% t  G: n% a: c
  19.     }+ e: _4 t: ?" B; V1 Z$ D& T
  20.   }
    . u' c. @- \( r1 P' I
  21. }): d% T1 @5 S$ Q# p4 F  T
  22. // 调用 setter， vm.name 和 vm.url 也会被对应更新3 V# Y6 {) R3 ?0 H
  23. vm.site = '百度教程 http://www.baidu.com';
      Q. o  q7 m$ ~" d
  24. document.write('name: ' + vm.name);- h" Z4 d3 L5 z) i2 y4 L6 M$ f
  25. document.write('<br>');
    5 M, X& ]: s4 W( V% D+ r) ^6 J( q/ C3 b
  26. document.write('url: ' + vm.url);
复制代码
从实例运行结果看在运行 vm.site = '百度教程 http://www.baidu.com'; 时，setter 会被调用， vm.name 和 vm.url 也会被对应更新。9 l3 M  M$ b2 D" \9 y
) G! N! D2 R9 R9 w* w! A. U
* S5 e9 r9 T" E! o! k# x3 y
9 |6 }1 q3 }+ e' c. \
- V+ z7 |6 W& [6 O* k/ v' `7 d
3 ^" H* {# q. @& |. Z2 h




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