可以使用计算属性来快速计算在视图中显示的属性,这些计算将缓存,并只在需要时进行更新。
在 Vue 中,可以通过多种方式为视图设置值,包括直接将数据值与视图结合,使用简单的表达式或使用过滤器对内容进行简单的转换。
计算财产
计算属性允许我们对视图计算模型特定的复杂值,这些值将绑定到依赖值,并且只在需要时进行更新。
例如,我们可以在数据模型中具有一个对象结果的集合:
1data() {
2 return {
3 results: [
4 {
5 name: 'English',
6 marks: 70
7 },
8 {
9 name: 'Math',
10 marks: 80
11 },
12 {
13 name: 'History',
14 marks: 90
15 }
16 ]
17 }
18}
假设我们想要查看所有主题的总和,我们不能为此任务使用过滤器或表达式。
- 过滤器用于简单的数据格式化,在应用程序中的多个地方都需要使用
- 表达式不允许使用流程操作或其他复杂的逻辑。
这里是计算属性有用的地方,我们可以像这样将计算值添加到模型中:
1computed: {
2 totalMarks: function() {
3 let total = 0;
4 for(let i = 0; i < this.results.length; i++){
5 total += parseInt(this.results[i].marks);
6 }
7 return total;
8 }
9}
计算的TotalMarks属性使用结果数组计算了总标记,它简单地循环通过值并返回子总数。
然后,我们可以在视图中显示计算值:
1<div id="app">
2 <div v-for="subject in results">
3 <input v-model="subject.marks">
4 <span>
5 Marks for {{ subject.title }}: {{ subject.marks }}
6 </span>
7 </div>
8
9 <span>
10 Total marks are: {{ totalMarks }}
11 </span>
12</div>
计算性能 vs 方法?
我们可以通过使用输出总量的方法获得相同的结果。
相反,在计算的部分中有TotalMarks函数,我们可以将其移动到方法,在视图中我们可以更改模板以执行方法:
1<span>
2 Total marks are: {{ totalMarks() }}
3</span>
使用这个语法,每次页面渲染时都会执行 totalMarks() 方法(即:每次更改时)。
如果相反,我们有一个计算属性,Vue 会记住计算属性依赖的值(例如:在上一个例子中,这将是结果)。
由于这个原因,函数必须是纯粹的函数,不能产生副作用,输出只能依赖于传入函数的值。
计算机设置
默认情况下,计算的属性只会显示一个 getter 但是,也可以有 setters。
1computed: {
2 fullName: {
3 get: function() {
4 return this.firstName + this.lastName;
5 },
6 set: function(value) {
7 let names = value.split(' ');
8 this.firstName = names[0];
9 this.lastName = names[names.length - 1];
10 }
11 }
12}
通过有输入器和设置器,我们可以正确地将输入值绑定到模型中. 如果我们在方法中设置fullName,传入字符串将被分为第一名和最后名称。
关于观察员的一句话
虽然在大多数情况下计算的属性可能足够,但观察员通过允许我们听取对一个属性的更改来提供额外的控制级别。
观察器,正如其名称所暗示的那样,允许我们观察模型对象的变化,虽然可以使用观察器来获得与计算值相同的结果,但它往往更复杂和昂贵。
我们可以使用观察器来满足更复杂的要求,例如:
- Async 操作
- 设置中间值
- 限制一个操作被调用次数(例如:解除输入事件)