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傳參。