cncml手绘网
标题: Vue.js 计算属性 [打印本页]
作者: admin 时间: 2018-7-4 11:00
标题: Vue.js 计算属性
计算属性关键词: computed。
计算属性在处理一些复杂逻辑时是很有用的。
可以看下以下反转字符串的例子:
实例 1
4 g( j" ^4 _ n/ P& v- <div id="app">' i, w+ O* X% M5 u
- {{ message.split('').reverse().join('') }}# ?- T* u- { E4 \: @. T, I, c1 i3 t
- </div>
复制代码实例 1 中模板变的很复杂起来,也不容易看懂理解。
接下来我们看看使用了计算属性的实例:
实例 2
% G- T b* u% I1 F- <div id="app">
# @6 |1 [: D* g1 @- c8 v) G - <p>原始字符串: {{ message }}</p>& G6 ~6 }" L4 R& \6 ]5 Z
- <p>计算后反转字符串: {{ reversedMessage }}</p>
& T! A# e. @6 {) ?; M - </div>
" A2 S/ `! E3 Y/ Z6 ^7 u, f2 k -
/ r0 F7 z9 i2 g - <script>
# V3 O, {2 x$ N& F& E& t# |/ O# F - var vm = new Vue({6 P) E5 B6 ~- i- G4 L: G: n7 Y
- el: '#app',1 w5 s3 O' b. h9 m7 j% o/ G
- data: {( H5 f$ A8 m3 ?0 N' A
- message: 'Runoob!'
3 i l& ^* \2 Q% ?& T1 e0 _ - },9 w" ?, s0 q% z+ O2 P# Y5 p1 k, i: {2 m
- computed: {, b$ j, b: @; ^7 a' ~: _; p: _
- // 计算属性的 getter5 s) N( z" O0 f5 M* ?$ \$ U
- reversedMessage: function () {! p& a8 L3 d9 ]6 P
- // `this` 指向 vm 实例
) H4 O# ]! y2 ^7 u - return this.message.split('').reverse().join('')% A; P% v% q& I5 p3 {' t; X
- }
0 M q( Z! @4 y4 f( y! b' C( F- x# q5 }* e - }6 c! c, h4 M5 M i1 Y# k
- })
/ k1 M% Y6 i5 u5 m ~' q; _9 ?3 @. O - </script>
复制代码实例 2 中声明了一个计算属性 reversedMessage 。
提供的函数将用作属性 vm.reversedMessage 的 getter 。
vm.reversedMessage 依赖于 vm.message,在 vm.message 发生改变时,vm.reversedMessage 也会更新。
computed vs methods我们可以使用 methods 来替代 computed,效果上两个都是一样的,但是 computed 是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值。而使用 methods ,在重新渲染的时候,函数总会重新调用执行。
实例 3( r& u7 X0 z" E; v
- methods: {
' j4 a% Y% @1 k) i6 O6 D - reversedMessage2: function () {
+ b6 Y6 }2 U/ }& G& K1 k7 Z - return this.message.split('').reverse().join('')3 r- g0 D5 I# r' ^- @0 U6 r
- }$ L; G Q$ Y4 G* D4 q
- }
复制代码可以说使用 computed 性能会更好,但是如果你不希望缓存,你可以使用 methods 属性。
computed settercomputed 属性默认只有 getter ,不过在需要时你也可以提供一个 setter :
实例 4+ w" m4 G3 L3 L
- var vm = new Vue({
5 h' Q5 H# i, s8 q - el: '#app',7 z6 P7 k4 I+ K+ ^) U# t) T4 e
- data: {6 f3 b' V0 F4 c1 B8 H
- name: 'Google',
! e4 _# m) h& i, q/ k# B8 @ - url: 'http://www.google.com'$ b9 j x+ b) \/ s K5 Y
- },& f# g* w0 L( j' B3 c; p* F
- computed: {
* Q. L4 a* m# t& n; ^ - site: {
$ X$ c$ u+ D+ u. B - // getter
8 Q3 n) K* b: i V - get: function () {
% q# S: ]# m/ k5 l) { - return this.name + ' ' + this.url
9 J7 P+ r, ]4 J - },
/ b- D+ i. ~1 s% q/ X+ ?" D - // setter
! U% c# G9 S0 ]8 \" b- g - set: function (newValue) {
; z2 P/ r: }6 V" { - var names = newValue.split(' ')) }7 o! b1 z( K1 s1 f3 ~" s
- this.name = names[0]
+ M3 x+ P. `0 V* |! z6 T - this.url = names[names.length - 1]7 x3 V; u4 N1 t* i; M
- }% t G: n% a: c
- }+ e: _4 t: ?" B; V1 Z$ D& T
- }
. u' c. @- \( r1 P' I - }): d% T1 @5 S$ Q# p4 F T
- // 调用 setter, vm.name 和 vm.url 也会被对应更新3 V# Y6 {) R3 ?0 H
- vm.site = '百度教程 http://www.baidu.com';
Q. o q7 m$ ~" d - document.write('name: ' + vm.name);- h" Z4 d3 L5 z) i2 y4 L6 M$ f
- document.write('<br>');
5 M, X& ]: s4 W( V% D+ r) ^6 J( q/ C3 b - document.write('url: ' + vm.url);
复制代码 从实例运行结果看在运行 vm.site = '百度教程 http://www.baidu.com'; 时,setter 会被调用, vm.name 和 vm.url 也会被对应更新。9 l3 M M$ b2 D" \9 y
) G! N! D2 R9 R9 w* w! A. U
* S5 e9 r9 T" E! o! k# x3 y
9 |6 }1 q3 }+ e' c. \
- V+ z7 |6 W& [6 O* k/ v' `7 d
3 ^" H* {# q. @& |. Z2 h
| 欢迎光临 cncml手绘网 (http://www.cncml.com/) |
Powered by Discuz! X3.2 |