cncml手绘网
标题: Vue.js 计算属性 [打印本页]
作者: admin 时间: 2018-7-4 11:00
标题: Vue.js 计算属性
计算属性关键词: computed。
计算属性在处理一些复杂逻辑时是很有用的。
可以看下以下反转字符串的例子:
实例 1
$ f2 c$ c. y ?6 G. ]8 D0 q- <div id="app">" g9 [; [1 U4 F5 ^, Y
- {{ message.split('').reverse().join('') }}
& g3 h6 j: E& `4 ~# L# _3 A0 O - </div>
复制代码实例 1 中模板变的很复杂起来,也不容易看懂理解。
接下来我们看看使用了计算属性的实例:
实例 2 ]/ T- X! d( @
- <div id="app">
! O# I' `. V& {, v - <p>原始字符串: {{ message }}</p>* a6 p9 q+ E1 j% O+ y
- <p>计算后反转字符串: {{ reversedMessage }}</p>
6 l" k; U! R- W' X) @. X* \( ~ - </div>+ a. Q- ^5 G; ~$ W- G! q& o! G6 h% t2 Z
-
1 ~4 u9 @& u7 ]1 {7 o: E - <script>6 B& C# y+ W: r ? g
- var vm = new Vue({( @ c9 \6 q" `) M9 @
- el: '#app',6 Z! L% ?1 {3 d( {1 k+ S
- data: {
Q3 R5 y' i8 Z6 D. B0 q - message: 'Runoob!'. a6 M2 x% p+ r$ h' H l) c
- },
7 c& d9 \" m" K3 U% {+ r8 j - computed: {
$ l2 |5 q0 l4 |" z; O( s - // 计算属性的 getter
' s }: t J- J8 O" L - reversedMessage: function () {" L9 J. s. ^% S& q7 t
- // `this` 指向 vm 实例
/ ?* z% N( |' t$ \$ ^, K - return this.message.split('').reverse().join('')- A6 B' L o2 J: ^6 u4 l
- }7 J+ s* S* o1 L, }; w
- }
4 `$ e8 j2 H& e$ |; G7 T9 x - })
5 e+ { \. C6 g; ~! w% u0 s; m - </script>
复制代码实例 2 中声明了一个计算属性 reversedMessage 。
提供的函数将用作属性 vm.reversedMessage 的 getter 。
vm.reversedMessage 依赖于 vm.message,在 vm.message 发生改变时,vm.reversedMessage 也会更新。
computed vs methods我们可以使用 methods 来替代 computed,效果上两个都是一样的,但是 computed 是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值。而使用 methods ,在重新渲染的时候,函数总会重新调用执行。
实例 3
( i) r& o4 p, x1 x$ y- methods: {
- o) r/ O6 `, ^, D' c) V - reversedMessage2: function () {
A# K8 z4 x6 u- b - return this.message.split('').reverse().join('')+ @; X1 n! V% r \2 ~9 u
- }
9 d9 \+ D- _" z7 O - }
复制代码可以说使用 computed 性能会更好,但是如果你不希望缓存,你可以使用 methods 属性。
computed settercomputed 属性默认只有 getter ,不过在需要时你也可以提供一个 setter :
实例 4) \* k/ {. U+ S" W# A
- var vm = new Vue({8 M3 i N4 k! q7 e. S9 f/ m
- el: '#app',
5 ^+ `; j y4 T0 v# ]4 E- C - data: {0 E6 y1 J, p2 }) y+ `/ d# x
- name: 'Google',% `7 x) Y+ o( ~6 n
- url: 'http://www.google.com'
5 v+ V- e: j0 ^% U; O6 W - },3 P& D/ x/ j! y
- computed: {
: P3 {$ w$ W/ q0 B9 \4 I: J, H - site: {
% G- S, z$ r, |8 q* Z C: Z( g - // getter& C) @4 ^2 O" m# F, a% g: g
- get: function () {9 }4 k3 h0 T0 D2 J
- return this.name + ' ' + this.url3 |" Z1 |6 W# B) P0 f; r) \4 Z% Z
- },
; Z& d0 M7 j+ X! h- `3 F - // setter q5 F& R" Z8 g0 W. ~" ]) F; n' O
- set: function (newValue) {
' ~5 E+ O' Y/ y - var names = newValue.split(' ')
+ x6 K1 T$ Q" T3 r; e# F3 l - this.name = names[0]3 P# A" W, _% _( L0 x3 @8 E4 A
- this.url = names[names.length - 1]# J* O3 Q. Q" D* v4 l
- }' Q. Y- i! L" d! h& \) N7 D/ j
- }
; e5 t6 ]5 ~! m9 Z' T - }
* @; U& h0 o1 w4 q - })' a3 M& g1 N, @: u
- // 调用 setter, vm.name 和 vm.url 也会被对应更新6 M: k: Y0 d, I+ t% [( @* r, ?
- vm.site = '百度教程 http://www.baidu.com';
% a7 o. r0 [9 B; j - document.write('name: ' + vm.name);) |, V M, b: Y% m: \
- document.write('<br>');5 L! P t% k# Z. `8 R. W
- document.write('url: ' + vm.url);
复制代码 从实例运行结果看在运行 vm.site = '百度教程 http://www.baidu.com'; 时,setter 会被调用, vm.name 和 vm.url 也会被对应更新。
# A3 D: _9 `) P, X- G: E) I# N
7 e* w) v; ?# `" }) D* w* b
4 f% E) R1 y) F) X4 ? ~
; V4 T6 q: v( z0 |
* w& g6 ?9 ]. C! g, v
; `* d9 T7 ^. }/ g* C: n7 n
欢迎光临 cncml手绘网 (http://bbs.cncml.com/) |
Powered by Discuz! X3.2 |