從多個方面詳解Vuecomputed

一、VueComputed和Methods的區別

在Vue中，我們可以定義methods和computed。那麼這兩者有什麼區別呢？簡單來說，methods是一個方法，它可以接受參數並返回一個結果。而computed則是依賴於響應式數據的屬性，也就是對象屬性。

我們可以這樣理解：methods返回的是一個值，每次調用它的時候都會重新執行方法；而computed是一種響應式的計算屬性，只要依賴數據發生變化，computed會自動重新計算結果。而如果依賴數據沒有變化，那麼computed會直接從緩存中返回之前計算的結果，這也就是computed的緩存機制。

舉個例子，比如我們需要計算一個人的BMI指數，根據公式，BMI指數=體重（kg）/身高²（m²）。

// 方法中計算BMI指數
methods: {
  getBMI(weight, height) {
    return weight / (height * height)
  }
}

// Computed中計算BMI指數
computed: {
  bmi() {
    return this.weight / (this.height * this.height)
  }
}

我們可以發現使用computed的代碼更加簡潔，並且每次只要體重或身高數據有變化，就能自動重新計算BMI指數。

二、VueComputed緩存機制有什麼用

在上面的例子中，我們已經提到了VueComputed的緩存機制，也就是如果依賴數據沒有變化，那麼computed會直接從緩存中返回之前計算的結果。VueComputed作為響應式的計算屬性，這個緩存機制可以提高性能，防止無意義的重複計算。

除此之外，VueComputed還允許我們實時監控數據的變化，並及時傳遞新的變化，從而可以觸發下游的事件、操作或視圖的更新。正因為VueComputed具有緩存、響應式、自動監控等多個特性，我們才會經常使用Computed。

三、VueComputed傳參

在某些場合下，我們需要在計算屬性中使用參數。VueComputed雖然和VueMethods不同，但Actually VueComputed也是可以使用形參的，只不過比methods有些不同。

首先，我們要知道，computed只能傳遞到組件中定義的data屬性和computed屬性中已存在的state屬性。其次，我們可以通過在計算屬性函數定義時傳遞參數來實現傳參。

computed: {
  animalSound() {
    return function(animal) {
      switch (animal) {
        case 'dog':
          return 'Woof!'
        case 'cat':
          return 'Meow!'
        default:
          return '...'
      }
    }
  }
}

// 使用
{{ animalSound('dog') }} // 輸出 Woof!

需要注意的是，上述例子中，animalSound是一個函數，需要在組件內使用aninalSound()調用函數並傳遞參數。這裡只列舉了一種實現方式，大家可以通過類似的方式在VueComputed中傳遞參數。

四、VueComputed Data選取

在VueComputed中，我們通常可以通過data屬性中的值來計算結果，但是在實際開發中，常常會存在一些data值需要被filter過濾後才能使用，此時我們可以將其放在computed屬性中，以便後續使用。

data() {
  return {
    items: [
      { title: 'Vue', done: true },
      { title: 'React', done: false },
      { title: 'Angular', done: true },
    ]
  }
},
computed: {
  filteredItems() {
    return this.items.filter(item => !item.done)
  },
  count() {
    return this.filteredItems.length
  }
}

在上面的代碼中，我們首先定義了一個data屬性items，這個屬性是一個列表，該列表中的每一項有一個title和一個done屬性。之後我們將items列表過濾出未完成的項目列表，並將這個列表放在了computed屬性filteredItems中，這個列表中的每一項都不包含done為true的數據。最後我們想計算這個過濾後的列表的數量，我們將這個值放在了computed屬性count中。這意味着每當數據變化，我們就可以重新計算已過濾的列表和它的長度，而不需要重複使用過濾數據的邏輯。

五、VueComputed和Watch

Vue中，除了computed之外，還有watch。它們都是用來監測數據變化的，但是它們有着本質的不同。

VueComputed是一個計算屬性，它的值依賴於其他響應式數據的值，並根據這些值進行更複雜的計算結果。它是由多個已有響應式成分輸出的新計算成分。Computed不僅用於前端界面的顯示，而且還用於依賴於這些輸出的其他操作。Computed輸出結果基於數據響應式，因此它具有響應式、緩存的優勢。

而Watch則是一個觀察者，用於監測數據變化後執行相應操作。它只是簡單的響應state對象的變化。當state對象變化時，watch就會自動執行綁定的方法。Watch雖然可以監測到數據變化並執行相應操作，但是需要手動進行內部處理，它不具備computed自動觸發計算、緩存的優勢。

data() {
  return {
    firstName: 'Steve',
    lastName: 'Jobs',
    fullName: ''
  }
},
watch: {
  // 監聽firstName、lastName的變化
  firstName(val) {
    this.fullName = val + ' ' + this.lastName
  },
  lastName(val) {
    this.fullName = this.firstName + ' ' + val
  }
}

computed: {
  // fullName 寫作計算屬性
  fullName() {
    return this.firstName + ' ' + this.lastName
  }
}

當firstName或者lastName的值被改變時，computed的函數會自動重新計算，同時也會自動觸發watch的方法。在上面的代碼中，使用computed可以讓代碼更簡潔、易讀、方便維護。

總結

綜上所述，VueComputed是Vue.js提供的一個計算屬性，在處理狀態數據時非常方便。VueComputed具有緩存、自動依賴性、自動觸發更新等特點，能夠高效地提高應用程序的性能。 Computed 和 Watch 都是重要的Vue工具，各自有其應用場景。正確使用它們可以讓代碼更加清晰易懂，同時能夠提升開發效率。