前言
在日常开发中，如果说有哪些选项是经常使用的，computed绝对是其中一个。因为我们有时需要对原始数据进行更改后再输出。比如我在文本框输入了一大串数据，然后我希望这一大串数据可以颠倒显示出来，你也许会在模版内直接使用表达式，比如这样：
1
2
3
| <div>
{{ msg.split('').reverse().join('') }}
</div>
|
这样写可以达到我们的要求，看起来也没什么问题。但是，如果我输入的这一大串数据需要在多个地方显示出来，总不能每个地方都写这么一个表达式吧？这样会很累的。Vue 也考虑了在模板中放入太多的逻辑会让模板过重且难以维护，所以computed出现了。
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
27
28
29
30
| <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
</head>
<body>
<div id="app">
<div>{{ reversedMsg }}</div>
<input v-model="msg" />
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data() {
return {
msg: 'hello'
}
},
computed: {
// 颠倒
reversedMsg() {
return this.msg.split('').reverse().join('')
}
}
})
</script>
</body>
</html>
|
通过上面的示例代码，可以看到颠倒数据的表达式已经被统一在了computed中，这样写会给人更清晰的感觉，在后期维护中也会更方便。