Vue的computed传参详解

一、computed的基本用法

computed是Vue实例中一个非常强大的计算属性，它的值主要根据依赖的数据而变化。我们可以将一些简单的计算放到computed属性中，从而实现在模板中使用简单的表达式。看看下面的代码：

  
    new Vue({
      el: '#app',
      data: {
        price: 10,
        count: 2
      },
      computed: {
        totalPrice: function() {
          return this.price * this.count;
        }
      }
    })
  

在上面的代码中，我们定义了两个数据price和count，以及一个computed属性totalPrice。我们在模板中直接使用totalPrice就可以获得计算后的值。这样做的好处是代码更加简洁明了，而且computed属性只有在依赖的数据发生变化时才会重新计算。

二、computed传参的两种方式

1. 直接在computed中传参

computed传参是一种非常灵活的方式，我们可以通过传参来实现复杂的计算，在Vue实例中直接定义，这种方式通常适用于传递不同的值对同一个函数进行计算的情况。

  
    new Vue({
      el: '#app',
      data: {
        price: 10,
        count: 2
      },
      computed: {
        totalPrice: function() {
          return this.total(this.price, this.count);
        },
        total: function(price, count) {
          return price * count;
        }
      }
    })
  

在上面的代码中，我们定义了一个total函数，用来接收传递过来的参数。在computed中定义了totalPrice属性，调用total函数进行计算，传入要计算的值，从而获得总价。

2. 使用方法传参

computed传参的另一种方式是通过methods方法来进行传参。这种方式适用于传递相同的值，但对不同的函数进行计算的情况。

  
    new Vue({
      el: '#app',
      data: {
        price: 10,
        count: 2
      },
      computed: {
        totalPrice: function() {
          return this.total('discount', this.price, this.count);
        }
      },
      methods: {
        total: function(type, price, count) {
          switch (type) {
            case 'discount':
              return price * count * 0.8;
              break;
            case 'tax':
              return price * count * 1.1;
              break;
            default:
              return price * count;
              break;
          }
        }
      }
    })
  

在上面的代码中，我们定义了一个total方法，接收三个参数来进行计算。在computed中定义了totalPrice属性，使用this调用total方法，并传入参数来计算总价。

三、computed传参的优劣势

1. 优势

computed传参的优势主要在于其灵活性。可以根据不同的情况来使用不同的方法进行计算，不必局限于某个特定的计算方式。同时，使用computed传参可以减少代码的冗余，让代码更加简洁明了。

2. 劣势

computed传参可能存在的劣势主要是在性能方面。由于依赖数据的变化会重新计算computed，如果computed处理的数据量比较大，或者计算方式比较复杂，可能会增加页面的渲染时间，影响页面的性能。

四、总结

computed传参是Vue中一个比较灵活和强大的功能，使用computed传参可以写出简洁、易读、易维护的代码，并且可以满足多种计算需求。但需要注意的是，在处理数据量比较大或计算方式比较复杂的情况下，需要考虑性能问题。需要在灵活性和性能之间进行权衡，选择最优的方式来使用computed传参。