Vue 中 computed 计算属性的应用场景

计算属性是 Vue 组件的一个重要内容,它具有 分离逻辑缓存值双向绑定 等作用或功能。

分离逻辑

需求如下:

1
2
3
4
// 给定文本 text,去除其首尾空白,然后将其反转显示。
// 例:
const text = '花谢花飞花满天'
// ==> 天满花飞花谢花

不使用计算属性,代码长这样:

1
2
3
4
5
6
7
8
9
10
11
12
13
<template>
<div id="example">
{{ text.split('').reverse().join('') }}
</div>
</template>

<script>
export default {
data: () => ({
text: '花谢花飞花满天'
})
}
</script>

使用计算属性后,代码长这样:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<template>
<div id="example">
{{ normalizedText }}
</div>
</template>

<script>
export default {
data: () => ({
text: '花谢花飞花满天'
}),
computed: {
normalizedText() {
return this.text.split('').reverse().join('')
}
}
}
</script>

显而易见,使用计算属性后,相关逻辑放在了 computed 选项内,模板更干净了:

See the Pen Vue 中 computed 计算属性的应用场景 - 分离逻辑 by Jay Fong (@fjc0k) on CodePen.

缓存值

接上例,如果我们不去改变 text 的值,那么 normalizedText 就不会重新计算,也就是说,normalizedText 会缓存其求值结果,直到其依赖 text 发生改变。我们可以测试一下:

See the Pen Vue 中 computed 计算属性的应用场景 - 缓存值 by Jay Fong (@fjc0k) on CodePen.

双向绑定

我们可以利用计算属性的 gettersetter 实现数据的双向绑定:

See the Pen Vue 中 computed 计算属性的应用场景 - 双向绑定 by Jay Fong (@fjc0k) on CodePen.