cncml手绘网

标题: Vue.js 计算属性 [打印本页]
作者: admin    时间: 2018-7-4 11:00
标题: Vue.js 计算属性
计算属性关键词: computed。
计算属性在处理一些复杂逻辑时是很有用的。
可以看下以下反转字符串的例子：
实例 1
8 H: k4 ^- j! ^1 t( p% F
  1. <div id="app">
    1 t) N3 b3 \8 h: g
  2.   {{ message.split('').reverse().join('') }}
    ' [0 P5 ~7 D7 E5 O3 T( r
  3. </div>
复制代码
实例 1 中模板变的很复杂起来，也不容易看懂理解。
接下来我们看看使用了计算属性的实例：
实例 2
) V" }1 D8 i. x$ o% X8 U
  1. <div id="app">
    # \! f+ U3 I) j- |' f& e
  2.   <p>原始字符串: {{ message }}</p>7 q' m; b! v: q% O# O
  3.   <p>计算后反转字符串: {{ reversedMessage }}</p>
    9 z* O, V0 Y+ x$ n3 n
  4. </div>$ g4 M: P) i# S& U* [

  5. , Y% {; j( C* H4 ]9 L$ J( q/ C6 r
  6. <script>, q' M( z) o: u. e
  7. var vm = new Vue({
    5 m* G  l1 y1 Y- K/ T6 ~
  8.   el: '#app',' ?& }( M2 J. Q# V% M: q! d# M; ^
  9.   data: {' b+ G- T* b: D: }
  10.     message: 'Runoob!'
    ) n5 c6 H3 q' {5 i
  11.   },
    , K' u, U: M; g1 a8 a
  12.   computed: {8 R, [% M: j/ d( o3 z
  13.     // 计算属性的 getter
    ) @/ N) n6 X( A" j
  14.     reversedMessage: function () {( {5 B2 D. r; p  }% |+ N% u- Z: F
  15.       // `this` 指向 vm 实例# j# [$ T; L- {5 C
  16.       return this.message.split('').reverse().join('')
    8 @8 q0 b0 Z" i" D
  17.     }; u3 s% @) l9 X5 y! p5 Y
  18.   }% _9 T+ W3 R$ R9 S# O
  19. })5 t! ?+ {$ ~/ F
  20. </script>
复制代码
实例 2 中声明了一个计算属性 reversedMessage 。
提供的函数将用作属性 vm.reversedMessage 的 getter 。
vm.reversedMessage 依赖于 vm.message，在 vm.message 发生改变时，vm.reversedMessage 也会更新。
computed vs methods
我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。
实例 3/ x/ Z. P8 }4 V2 u9 ^( ]
  1. methods: {, G8 x1 n0 l! D' `
  2.   reversedMessage2: function () {
    ; P' ?/ L( B8 |
  3.     return this.message.split('').reverse().join('')' v9 S& X- o( W
  4.   }2 x2 w' I7 o3 P8 U: t) [- L0 d
  5. }
复制代码
可以说使用 computed 性能会更好，但是如果你不希望缓存，你可以使用 methods 属性。
computed setter
computed 属性默认只有 getter ，不过在需要时你也可以提供一个 setter ：
实例 4  ]2 T; T9 I- v$ v6 \
  1. var vm = new Vue({  a& V2 z) h7 o& A3 o
  2.   el: '#app',' g( W& A% D/ W1 j
  3.   data: {
    2 w, F! e, q1 l/ E, w7 ?
  4.     name: 'Google',
    & x, M/ E  k- Q- z2 h
  5.     url: 'http://www.google.com'
    ) w% b. C/ y6 F8 d
  6.   },& H9 H& I4 J/ `2 \+ g& K! }  q
  7.   computed: {& R2 E7 Y5 g( O' a! v# @
  8.     site: {
    1 k0 z8 g9 m: o. U
  9.       // getter& W* V( X; ~) F% o
  10.       get: function () {
    & H- h' `/ p8 O% l
  11.         return this.name + ' ' + this.url
    # r8 }  O0 Y, H) a; P) T* |
  12.       },
      h; ]! a/ I+ S5 `7 H  _
  13.       // setter
    $ }* J' A  L- b! s9 U
  14.       set: function (newValue) {
    - r2 A) U2 X8 o; y8 [9 _0 {) j5 A
  15.         var names = newValue.split(' ')/ G% @+ a% f* W9 c9 T( j, O
  16.         this.name = names[0]2 M# Y, q; [5 Z$ `
  17.         this.url = names[names.length - 1]/ d' s/ \7 f* g7 h6 x
  18.       }
    $ P8 {2 a- _6 N* l* L: p7 s
  19.     }
    . f$ X* b# L  c+ e9 T
  20.   }
    1 ~. a' Y& W3 y- V
  21. })
    : n, m/ X7 I/ F8 B2 ?" u
  22. // 调用 setter， vm.name 和 vm.url 也会被对应更新' b0 m  J% A* c
  23. vm.site = '百度教程 http://www.baidu.com';
    - q# `& `- K% P; k+ p% e
  24. document.write('name: ' + vm.name);$ k' q3 N2 Q8 A% f: T$ M5 r
  25. document.write('<br>');& B0 _+ a" N4 t
  26. document.write('url: ' + vm.url);
复制代码
从实例运行结果看在运行 vm.site = '百度教程 http://www.baidu.com'; 时，setter 会被调用， vm.name 和 vm.url 也会被对应更新。
$ K1 h+ e. Q8 m 5 n/ Q: m7 t' k

, z5 x+ K+ p+ w9 B: u" n  M0 g% @, a0 I1 t

( C, j% _$ |( ]% d+ m: ~0 a# f) [# G/ p; }% S( E3 _( i8 V: u




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