cncml手绘网

标题: Vue.js 计算属性 [打印本页]
作者: admin    时间: 2018-7-4 11:00
标题: Vue.js 计算属性
计算属性关键词: computed。
计算属性在处理一些复杂逻辑时是很有用的。
可以看下以下反转字符串的例子：
实例 1
2 h  g' j1 e% L  k  \+ I
  1. <div id="app">
    5 V! ]6 y, c% R* n( g
  2.   {{ message.split('').reverse().join('') }}
    . ?6 U# @  y9 b- T3 {
  3. </div>
复制代码
实例 1 中模板变的很复杂起来，也不容易看懂理解。
接下来我们看看使用了计算属性的实例：
实例 21 X% V4 v+ ~' a% u
  1. <div id="app">
    0 e0 L. Y- H* y3 T8 v0 G
  2.   <p>原始字符串: {{ message }}</p>+ l% h& d  m6 K/ i* p# J
  3.   <p>计算后反转字符串: {{ reversedMessage }}</p>  G4 F* r/ a' {! @$ D- A
  4. </div>
    . Q; U) O; H4 {* |* p

  5. 4 l3 S% ]7 v8 p, t
  6. <script>
    & P; U% E+ k( z
  7. var vm = new Vue({5 E7 b! T8 C: c" Z4 j
  8.   el: '#app',
    ( S+ q  s+ U1 s6 d% [4 |& G# y5 L: m
  9.   data: {% t) i( ^/ g& |" [; h) c, y2 V
  10.     message: 'Runoob!'
    , I! u+ T& M! C+ T
  11.   },
    . @& p+ g0 E% h6 W7 P- l
  12.   computed: {
    " s% X9 x" \" s
  13.     // 计算属性的 getter
    - G1 S; |8 v5 R
  14.     reversedMessage: function () {+ u6 A; J4 G2 t; l
  15.       // `this` 指向 vm 实例/ J; Y, S! K; M' [1 P, b$ t8 F
  16.       return this.message.split('').reverse().join('')
    8 I2 }1 ~1 v" w6 M7 O1 ^
  17.     }
    & p! d9 {7 X+ M' S! T+ a
  18.   }) B+ l! |3 v4 F/ ]! X' N- I* C
  19. })3 `8 V/ z7 L" r' c
  20. </script>
复制代码
实例 2 中声明了一个计算属性 reversedMessage 。
提供的函数将用作属性 vm.reversedMessage 的 getter 。
vm.reversedMessage 依赖于 vm.message，在 vm.message 发生改变时，vm.reversedMessage 也会更新。
computed vs methods
我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。
实例 3% O( _; D$ b1 D6 s+ q
  1. methods: {7 @$ y( q- Z+ X& f
  2.   reversedMessage2: function () {
    % y* D$ g1 B  J9 t; ?
  3.     return this.message.split('').reverse().join('')
    7 {6 \7 B- \* M# @$ n
  4.   }: [9 D0 ?9 B0 d
  5. }
复制代码
可以说使用 computed 性能会更好，但是如果你不希望缓存，你可以使用 methods 属性。
computed setter
computed 属性默认只有 getter ，不过在需要时你也可以提供一个 setter ：
实例 44 Q3 {: V9 F# e+ p  ]+ J4 I
  1. var vm = new Vue({" @! J6 V: M) g. C6 e
  2.   el: '#app',3 r/ G" B3 A3 f# y7 G& J4 s* f
  3.   data: {: x: j8 y8 c8 V% c! u
  4.     name: 'Google',
    + H9 z6 a% B" v5 k3 @
  5.     url: 'http://www.google.com'
    7 `/ L& f9 L9 J2 M3 Y# U
  6.   },+ l4 l0 t3 l( i
  7.   computed: {/ @2 @. L) e; m% u9 n
  8.     site: {7 T( h$ ~3 j3 x$ i. S9 j4 V5 ]
  9.       // getter+ t# a* M% Q! C  D
  10.       get: function () {7 {& f. b3 q! c9 |5 C
  11.         return this.name + ' ' + this.url1 O6 f' i0 j$ |5 m! @0 a
  12.       },
    ( Q; f' D# H) G2 b; R/ D7 z. ^
  13.       // setter
    % A' o2 }8 E, b
  14.       set: function (newValue) {1 Z" M- h$ N- }* N' g! o% {
  15.         var names = newValue.split(' ')
    2 e! u. y2 j' A2 [, b# F8 \( \
  16.         this.name = names[0]+ ]( K0 Z# I: Q
  17.         this.url = names[names.length - 1]5 Z% H/ n6 n/ A1 j- l. K9 X- s
  18.       }
    8 K8 b+ X7 E+ T* |7 a/ t( B
  19.     }
    , O  ^, ^* w% `/ B" X& r7 P
  20.   }
      ^( ^, B3 N! s$ w* o6 ]
  21. })7 Q2 I2 G+ [6 W# S
  22. // 调用 setter， vm.name 和 vm.url 也会被对应更新
    7 O$ g: d2 n5 {! h4 q$ R. w$ q% U
  23. vm.site = '百度教程 http://www.baidu.com';- X1 C' \% u/ [! L0 ~0 ~) \5 |
  24. document.write('name: ' + vm.name);
    9 _8 T" w% n7 x. l: c) L
  25. document.write('<br>');
    ! h2 G$ M/ F0 B. G' r& X2 [
  26. document.write('url: ' + vm.url);
复制代码
从实例运行结果看在运行 vm.site = '百度教程 http://www.baidu.com'; 时，setter 会被调用， vm.name 和 vm.url 也会被对应更新。
5 u$ c& }- k9 c& \ ' d8 F! `6 w  ^3 U5 S) s

/ x0 P8 K. G6 u9 Q5 c% l1 f7 e9 G% |

$ q" G2 X$ W, ?$ U
/ T7 l% w7 |  L' {



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