vue中计算属性和过滤器的区别和用法

首先来看一个例子：
已知数学成绩和语文成绩，要求他们的平均值
这里可以使用的方法很多：

• 在methods()里面计算；
• 在computed()里面计算；
• 在filter()里面计算

<template>
<div>
<div>平均值1：{{ avarage1 }}</div>
<div>平均值2：{{ avarage2 }}</div>
<div>平均值3：{{ math | avarage3(chinese) }}</div>
</div>
</template>

<script>
export default {
filters: {
avarage3: function(math, chinese) {
return (math + chinese) / 2
}
},
data() {
return {
math: 95,
chinese: 86,
avarage1: null
}
},
computed: {
avarage2: function() {
return (this.math + this.chinese) / 2
}
},
mounted() {
this.avarage()
},
methods: {
avarage: function() {
this.avarage1 = (this.math + this.chinese) / 2
}
}
}
</script>

很明显，这三种方式都可以算出平均值

然后我们再看一个例子
假设有一45名学生，我们需要计算出每一个人成绩的平均值
这个时候，计算属性就不那么合适了，因为计算属性相当于是定义了一个变量，在这种需要较多的时候并不合适
那么我们还可以使用methods和filters
methods计算的话是需要循环计算结果
filters计算则是在需要计算的位置进行调用
相比之下filters计算更好

<template>
<div>
<div v-for="(item, index) in grade" :key="index">学生{{ index + 1 }}: {{ item.math | avarage3(item.chinese) }}</div>
</div>
</template>

<script>
export default {
filters: {
avarage3: function(math, chinese) {
return (math + chinese) / 2
}
},
data() {
return {
grade: [{
math: 95,
chinese: 86
}, {
math: 45,
chinese: 76
}, {
math: 84,
chinese: 86
}, {
math: 63,
chinese: 53
}, {
math: 75,
chinese: 68
}, {
math: 99,
chinese: 89
}]
}
}
}
</script>

最后，我们来对比一下计算属性和过滤器的区别

计算属性
1、计算属性适合用在单个属性的计算；
2、计算属性只能在单个vue实例中使用；
3、计算属性不能接收参数，只能使用data中定义的变量进行计算；
4、计算属性有缓存机制，可减少调用次数；
5、计算属性相当于定义一个变量

过滤器
1、过滤器适合多个同样计算方法的属性的计算；
2、过滤器可以定义为全局过滤器，在多个vue实例中使用；
3、过滤器可以接收多个参数进行计算；
4、过滤器没有缓存机制，每调用一次都会计算一次；
5、过滤器相当于定义一个特殊的方法