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、过滤器相当于定义一个特殊的方法