cncml手绘网

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

作者: admin    时间: 2018-7-4 11:00
标题: Vue.js 计算属性
计算属性关键词: computed。
计算属性在处理一些复杂逻辑时是很有用的。
可以看下以下反转字符串的例子:
实例 1) m' Q3 ?2 V6 k& w9 |! x
  1. <div id="app">2 s( G) ?" P$ d7 Q8 w' \0 \
  2.   {{ message.split('').reverse().join('') }}: {$ l. ]9 e. N5 u* w9 T
  3. </div>
复制代码
实例 1 中模板变的很复杂起来,也不容易看懂理解。
接下来我们看看使用了计算属性的实例:
实例 2& g) |* U* C/ y* t' D) k' |6 l
  1. <div id="app">! f2 T% B. e% U, G7 K) j7 F- l; N
  2.   <p>原始字符串: {{ message }}</p>
    0 Q8 A% Q/ H! I  F! w2 y* y) M
  3.   <p>计算后反转字符串: {{ reversedMessage }}</p>
    1 a  ?6 O& h% J  H8 H4 w' s8 I; u; Y
  4. </div>
    : X6 Z/ \! n, M- j, ~" p* N1 w; \
  5. % P/ _6 j3 W- y8 t* G  k
  6. <script>- a' T2 V1 b9 f2 s7 e. z
  7. var vm = new Vue({
    $ w0 `. v  G# s: |
  8.   el: '#app',8 Y0 x3 W" u" m) b: p( A
  9.   data: {
    3 F$ q2 Y& Y2 x7 _' K
  10.     message: 'Runoob!'
    3 u. z. R% u. |( S7 u
  11.   },
    , \1 V  Q" L5 n. A& Y+ }
  12.   computed: {
    6 I! I9 ~/ h) R; O
  13.     // 计算属性的 getter7 M; B  h5 i- a! F" T' J% |
  14.     reversedMessage: function () {! d9 X& ~- p" b/ p8 Q
  15.       // `this` 指向 vm 实例) k- r7 B' [. [5 g
  16.       return this.message.split('').reverse().join('')) o2 F- I  s9 x& L; o) n3 J) ^+ x
  17.     }
    ( v4 _- y' C$ e# B+ R5 l4 E. @
  18.   }8 p  r5 M5 j% I! X) |
  19. })0 Y( ^8 w% L/ p3 V1 `
  20. </script>
复制代码
实例 2 中声明了一个计算属性 reversedMessage 。
提供的函数将用作属性 vm.reversedMessage 的 getter 。
vm.reversedMessage 依赖于 vm.message,在 vm.message 发生改变时,vm.reversedMessage 也会更新。

computed vs methods
我们可以使用 methods 来替代 computed,效果上两个都是一样的,但是 computed 是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值。而使用 methods ,在重新渲染的时候,函数总会重新调用执行。
实例 3
3 w, U6 y! s2 i) p
  1. methods: {$ D5 e' i* R1 ?8 }5 |# t) S+ h
  2.   reversedMessage2: function () {$ ~% H5 ^) [, U4 I' k& K0 z0 Z9 b$ n
  3.     return this.message.split('').reverse().join('')( D" }3 y" D6 s% v2 L- \
  4.   }* Z+ M7 z* v8 `# U+ ^# @
  5. }
复制代码
可以说使用 computed 性能会更好,但是如果你不希望缓存,你可以使用 methods 属性。

computed setter
computed 属性默认只有 getter ,不过在需要时你也可以提供一个 setter :
实例 4. o3 m* B, a: c6 o* \; K& D
  1. var vm = new Vue({
      J  F( ^; ?! D  d# e% L  {3 M1 w  V
  2.   el: '#app',
    ) v0 H. ~) |8 c' P; o  A+ U! `
  3.   data: {
    + c+ E  ~" e0 _* {  [5 k9 _" K
  4.     name: 'Google',
    % P# O$ j& ]# R7 B# G- M7 Z8 c5 x: `$ h
  5.     url: 'http://www.google.com'
    3 N4 {) O- E1 h7 {, R% f
  6.   },
    8 Z- ]% b* E8 ?) |, |( R
  7.   computed: {
    ) B! u4 @( Y; A2 D1 I
  8.     site: {6 {; Y( G" G' I. z- n4 v
  9.       // getter
    8 t& u# d+ K/ S3 P4 k* t) Y
  10.       get: function () {
    1 D/ T1 e' l8 Q8 X+ S( \8 s
  11.         return this.name + ' ' + this.url9 q" b" ?4 X# H3 ?- n8 [) [
  12.       },7 F% x+ t/ c4 W
  13.       // setter% N  n. s" t$ }8 d0 T
  14.       set: function (newValue) {
    2 @" ]/ F, [5 S9 p6 M
  15.         var names = newValue.split(' ')
    , d  \! l3 ~( Z* Q
  16.         this.name = names[0]
      l3 ^+ ~% n! \
  17.         this.url = names[names.length - 1]
    4 p: o" W& Q& w
  18.       }; r: i6 N: ^3 M& q1 L
  19.     }
    / i, ^/ v% I, i8 Y+ K7 V, Y/ \' Q
  20.   }+ o; d3 }9 ~7 I. u( X% ^0 B$ T
  21. })( ]1 A) w7 ^7 N+ |
  22. // 调用 setter, vm.name 和 vm.url 也会被对应更新
    , a- m; C' \$ [4 k+ g- K0 G$ H
  23. vm.site = '百度教程 http://www.baidu.com';
    ; |& }- e6 M& |# @
  24. document.write('name: ' + vm.name);
    # Z3 c0 _5 p9 y. F0 E
  25. document.write('<br>');. H- ?) q) @" K( W. W
  26. document.write('url: ' + vm.url);
复制代码
从实例运行结果看在运行 vm.site = '百度教程 http://www.baidu.com'; 时,setter 会被调用, vm.name 和 vm.url 也会被对应更新。9 E! E0 N5 i) ?4 T" J2 ]/ N

7 o! s3 y1 i1 y, O% }  D# l* p$ ]/ J+ A+ o, V3 O% @$ D

+ @. l; i6 L8 b1 R, Q; \& t4 T( s
% }! }1 q8 y1 x4 Z* u) n% ]
4 x5 J" N. F0 J- w: V




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