您尚未登录,请登录后浏览更多内容! 登录 | 立即注册

QQ登录

只需一步,快速开始

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 15768|回复: 0
打印 上一主题 下一主题

[Vue.js] Vue.js 计算属性

[复制链接]
跳转到指定楼层
楼主
发表于 2018-7-4 11:00:16 | 只看该作者 |只看大图 回帖奖励 |正序浏览 |阅读模式
计算属性关键词: computed。
计算属性在处理一些复杂逻辑时是很有用的。
可以看下以下反转字符串的例子:
实例 1/ Q1 ]" p  E" z! ^2 O
  1. <div id="app">
    4 ^1 e( |5 }6 y( C) ?
  2.   {{ message.split('').reverse().join('') }}
    4 ]1 w/ ?2 Y5 P9 u+ a1 x2 B
  3. </div>
复制代码
实例 1 中模板变的很复杂起来,也不容易看懂理解。
接下来我们看看使用了计算属性的实例:
实例 2
: x" y' o+ R; H9 x8 B+ l
  1. <div id="app">7 u% \/ h" c5 L& e! {" \/ [
  2.   <p>原始字符串: {{ message }}</p>
    5 v  u3 x) m7 i8 `6 n$ {
  3.   <p>计算后反转字符串: {{ reversedMessage }}</p>
    . ^5 `0 H7 \" A' f5 C! r, P# B
  4. </div>4 K; v& [& U5 {" f7 K% d
  5. - N1 |  H5 @+ U; ]! C1 h
  6. <script>
    : u8 z* K; W1 W
  7. var vm = new Vue({
    ! V7 g, O- N  z4 R' o/ e
  8.   el: '#app',( m" |. @' W: S# L
  9.   data: {
    + R  ?8 E3 T  o% i) L/ Z
  10.     message: 'Runoob!'( B; k1 x5 {# e
  11.   },
    ) C. W5 Z& k0 k3 Z: A7 x# ^
  12.   computed: {# v2 y2 j5 m1 d* U
  13.     // 计算属性的 getter& m, e- _  i2 d# r' x  [
  14.     reversedMessage: function () {, p4 o& i  E: W# ]: |- R: k
  15.       // `this` 指向 vm 实例& `. f! O: _) o' [
  16.       return this.message.split('').reverse().join('')& ]" s3 g' i/ p4 ^# p; q
  17.     }
    4 x1 `. x4 J  q2 p% l' b! T. f
  18.   }
    0 H" k8 l. _2 }1 q8 E8 q  E1 f
  19. })
    ) b9 n9 a( }  c) D% O! l2 q1 m+ k
  20. </script>
复制代码
实例 2 中声明了一个计算属性 reversedMessage 。
提供的函数将用作属性 vm.reversedMessage 的 getter 。
vm.reversedMessage 依赖于 vm.message,在 vm.message 发生改变时,vm.reversedMessage 也会更新。

computed vs methods
我们可以使用 methods 来替代 computed,效果上两个都是一样的,但是 computed 是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值。而使用 methods ,在重新渲染的时候,函数总会重新调用执行。
实例 3
3 r& R' q8 Y: h
  1. methods: {) e0 I$ [+ m8 O' U& o8 h: t- \. D
  2.   reversedMessage2: function () {
    ' R! F# C7 D; z2 @, ~% `! w
  3.     return this.message.split('').reverse().join('')/ ?$ T. q- I6 r
  4.   }
    0 E  ~9 O% T* r' t- h, E& _+ B6 W
  5. }
复制代码
可以说使用 computed 性能会更好,但是如果你不希望缓存,你可以使用 methods 属性。

computed setter
computed 属性默认只有 getter ,不过在需要时你也可以提供一个 setter :
实例 41 |4 b- s! z! B$ L4 D* E6 L
  1. var vm = new Vue({
    0 C+ p. ^* N; z) p
  2.   el: '#app',
    7 F5 S6 }7 d4 K2 ~
  3.   data: {
    . _/ z1 Z1 `. g
  4.     name: 'Google',5 k* b( m' H2 q7 b/ z8 A. i
  5.     url: 'http://www.google.com'; w( ^, c. X, P* a; e# [1 `; q
  6.   },
    2 q$ s* x, E9 [3 r, l  b# C( }8 |3 J
  7.   computed: {: m4 n4 [9 u1 Y2 |
  8.     site: {! h9 j& \4 X  \! b- {1 R5 G
  9.       // getter
    . Z/ e" f7 b2 c; Q# c# E
  10.       get: function () {
    " z& U% f* ^5 t- m2 q
  11.         return this.name + ' ' + this.url1 h8 d' Y( b- @
  12.       },
    # W, @5 K" Z8 B
  13.       // setter
    3 D# v3 T9 U- z1 N* I2 I6 `! B
  14.       set: function (newValue) {
    / h3 L1 ?5 d4 r4 j7 H
  15.         var names = newValue.split(' ')
    $ R  ^) Q7 _# v# `. D6 I" G
  16.         this.name = names[0]
    * g' n4 R1 v8 K
  17.         this.url = names[names.length - 1]1 D: N: t* B5 \: V0 l" F1 v
  18.       }8 {% w2 `  ~9 z; x9 ^3 N
  19.     }
    : G/ Q: F0 P( r/ T, j8 S
  20.   }
    " C) n) `$ X( ~
  21. })% y  ~, ~& u- ^: ?+ k0 V
  22. // 调用 setter, vm.name 和 vm.url 也会被对应更新, x9 F( f8 j1 y- h6 P
  23. vm.site = '百度教程 http://www.baidu.com';( V, H* ?9 o: A  g7 p" t: o
  24. document.write('name: ' + vm.name);
    ; v, J' k0 o5 n8 E- M) `5 v* i
  25. document.write('<br>');7 S/ X0 D& A9 ?# f
  26. document.write('url: ' + vm.url);
复制代码
从实例运行结果看在运行 vm.site = '百度教程 http://www.baidu.com'; 时,setter 会被调用, vm.name 和 vm.url 也会被对应更新。5 X' ]8 l, Q6 h

) S: D$ O8 {6 z' T, f+ M4 A
' e+ ]! i" v8 \% ]+ m. R5 E- ]8 Q% c" W8 j5 d& J( P! L0 j

  d7 ]) {) b/ E8 Y! n9 z0 O2 v# ?3 i1 V5 W! W6 X0 j1 z
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 支持支持 反对反对
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

GMT+8, 2026-3-17 21:46 , Processed in 0.099996 second(s), 23 queries .

Copyright © 2001-2026 Powered by cncml! X3.2. Theme By cncml!