cncml手绘网

标题: Vue.js 计算属性 [打印本页]
作者: admin    时间: 2018-7-4 11:00
标题: Vue.js 计算属性
计算属性关键词: computed。
计算属性在处理一些复杂逻辑时是很有用的。
可以看下以下反转字符串的例子：
实例 16 [/ q/ a/ [, M& ?7 c! ]
  1. <div id="app">- H' Y% A* _% Y5 h" Z
  2.   {{ message.split('').reverse().join('') }}
    7 g9 k7 a* Y$ d3 ]2 J: W/ a; I
  3. </div>
复制代码
实例 1 中模板变的很复杂起来，也不容易看懂理解。
接下来我们看看使用了计算属性的实例：
实例 26 O6 g) i. }  \
  1. <div id="app">
    6 \/ d# i' A$ d  v% @
  2.   <p>原始字符串: {{ message }}</p>+ v+ V: }3 N2 \! N1 t, e6 B
  3.   <p>计算后反转字符串: {{ reversedMessage }}</p>
    ! I  q8 d- f; l" i+ R. Z3 x
  4. </div>/ |! J* R- ?7 l9 r

  5. ( J- f/ F/ b8 P( v+ L6 ~* O. s
  6. <script>% m$ v% q+ H5 ?, U* }4 X
  7. var vm = new Vue({
    5 N8 u7 C$ h' y
  8.   el: '#app',
    0 j% I' @; U: c
  9.   data: {
    . i; t8 Y0 c8 A4 G2 ]/ v2 M
  10.     message: 'Runoob!'0 l, c! `5 m: w" m: J  ~
  11.   },& @& |1 a! \* ~3 p& j8 [3 ~
  12.   computed: {; l3 ^0 p2 @" ^. z( @% t, I" }1 n
  13.     // 计算属性的 getter
    8 V8 ?# u2 x* C% y. c8 k* e
  14.     reversedMessage: function () {: @0 X1 l9 {4 y; f! G
  15.       // `this` 指向 vm 实例
    1 j. O: x" w  t7 o7 R) S9 [
  16.       return this.message.split('').reverse().join(''). i: X5 x2 K2 c+ R: \( T5 E
  17.     }
    " `$ ?$ E* s7 {- j$ `
  18.   }3 V' x9 h, B, X. |% H* N6 M  P
  19. })
    + V6 W$ e% G  {2 ^  m3 Y" E
  20. </script>
复制代码
实例 2 中声明了一个计算属性 reversedMessage 。
提供的函数将用作属性 vm.reversedMessage 的 getter 。
vm.reversedMessage 依赖于 vm.message，在 vm.message 发生改变时，vm.reversedMessage 也会更新。
computed vs methods
我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。
实例 3
7 ], q& Z5 A3 t7 o& @2 T( d1 ~
  1. methods: {2 A& U; t2 v; d6 {/ \" P" r7 F6 u
  2.   reversedMessage2: function () {( F- i9 u& A% x
  3.     return this.message.split('').reverse().join('')
    & _4 ]7 r! O/ w* E" v' A, W, A
  4.   }/ I9 h6 ~  n- R9 G
  5. }
复制代码
可以说使用 computed 性能会更好，但是如果你不希望缓存，你可以使用 methods 属性。
computed setter
computed 属性默认只有 getter ，不过在需要时你也可以提供一个 setter ：
实例 4
4 H- h4 {; n# n- J. ^9 I$ f7 r$ W
  1. var vm = new Vue({
    ' e2 t% a2 Y+ V' ~# d8 |4 S
  2.   el: '#app',
    ! \# P! b7 W0 ^
  3.   data: {
    % Y4 ~7 V- `) y2 p9 c
  4.     name: 'Google',
    + @! [9 [0 V2 R) K  O% G
  5.     url: 'http://www.google.com'$ {* u& u4 Q0 _
  6.   },# v0 n. D2 p7 ?
  7.   computed: {
    : {% O8 q0 V7 W: }. P( m7 m) p; J
  8.     site: {
    4 }4 @2 N( V. P* [* T" ^
  9.       // getter
    0 s+ d7 |2 _) _( q- l& m9 o3 a
  10.       get: function () {/ M) X% G7 m" X: _+ ~2 t6 u7 _/ a  {6 l
  11.         return this.name + ' ' + this.url. {! N  F: q1 |" C
  12.       },
    3 u# [, P" E2 ~6 I0 v1 J, f5 E8 f
  13.       // setter
    / g* [; A4 ?; B" b" d0 Y4 U
  14.       set: function (newValue) {
    / K! D. {- Z6 U8 F% ^" \+ _
  15.         var names = newValue.split(' '). U2 _3 n9 O$ h% m) ?, j) M- U% r
  16.         this.name = names[0]
    ' y+ O1 T' L: D1 L' F/ \
  17.         this.url = names[names.length - 1]) J" L5 `1 P& c6 _6 t! w# l5 W
  18.       }
    & H- v/ E# |3 L, D) Z
  19.     }
    - q% |1 e+ |5 R
  20.   }
    . k* |3 S$ J8 D, H/ W
  21. })# Y$ q( j. o( X5 x6 Q5 r- ^# ?: y( a
  22. // 调用 setter， vm.name 和 vm.url 也会被对应更新$ y+ u' {. l# `
  23. vm.site = '百度教程 http://www.baidu.com';) i/ g# V1 T1 E7 R
  24. document.write('name: ' + vm.name);
    & t# W# N* ?3 ~
  25. document.write('<br>');
    2 G5 s# G9 f. N( U7 |
  26. document.write('url: ' + vm.url);
复制代码
从实例运行结果看在运行 vm.site = '百度教程 http://www.baidu.com'; 时，setter 会被调用， vm.name 和 vm.url 也会被对应更新。3 I" D3 y9 Y5 z6 ]" c
- G3 w( [; h, t& N- _
$ \) M* b% P$ Z2 P7 E

& M# U* A/ W1 H7 I
! H' \! d# u) f7 i( o
. q5 N2 T; ]$ I6 H) X+ B



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