Vue计算属性

不要在模版中放入太多的逻辑。模版最好是简单和声明性的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
data(){
return {
book:{
author: 'xxx',
borrower: [
'aaa',
'bbb',
'ccc'
]
}
}
}

<template>
<div>
<p>This book has been borrowed?</p>
<span>{{ book.borrower.length > 0 ? 'yes' : 'no' }}</span>
</div>
</template>

对于包含响应式数据的复杂逻辑,应使用计算属性computed

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
data(){
return {
book:{
author: 'xxx',
borrower: [
'aaa',
'bbb',
'ccc'
]
}
}
},
computed:{
//计算属性的getter
borrowedMessage(){
//this指向vm实例
return this.book.borrower.length > 0 ? 'yes' : 'no'
}
}

<template>
<div>
<p>This book has been borrowed?</p>
<span>{{ borrowedMessage }}</span>
</div>
</template>

在表达式中调用方法同样可以达成一样的效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
data(){
return {
book:{
author: 'xxx',
borrower: [
'aaa',
'bbb',
'ccc'
]
}
}
},
methods:{
borrowedMessage(){
//this指向vm实例
return this.book.borrower.length > 0 ? 'yes' : 'no'
}
}

<template>
<div>
<p>This book has been borrowed?</p>
<!--调用方法-->
<span>{{ borrowedMessage() }}</span>
</div>
</template>

区别:

  1. 计算属性基于依赖关系缓存。即vm.borrowedMessage依赖vm.book.borrower。故当vm.book.borrower改变,所有依赖vm.borrowedMessage的绑定都会更新,若vm.book.borrower没有改变,则多次访问vm.borrowedMessage均返回之前的结果,不会再次执行函数。

  2. 调用方法不会有缓存,每次触发重新渲染都会再次执行函数。即Date.now()methods中调用可以每次渲染更新数值,但在computed中则不会被更新。

若出现性能开销大的计算属性,需要缓存来节省开销则使用computed,若程序不想要缓存,则使用methods替代计算属性

setter

1
2
3
4
5
6
7
8
9
10
11
12
13
14
computed:{
fullName:{
//getter
get(){
return this.firstName + ' ' + this.lastName
},
//setter
set(newValue){
const names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}

监听器watch

当需要在数据变化时执行异步操作或者开销比较大的操作时,使用watch监听数据的变化。当数据有变化时才执行下一步操作。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//template
<div>
<p>question:</p>
<input v-model="question" />
</div>

//script
watch:{
question(new,old){
if(new.indexOf('?')>-1){
this.getAnswer()
}
}
},
methods:{
getAnswer(){
...
}
}
  • 版权声明: 本博客所有文章除特别声明外,均采用 Apache License 2.0 许可协议。转载请注明出处!
  • © 2020-2021 Aweso Lynn
  • PV: UV: