Vue計算屬性 computed

Vue中的計算屬性，主要將一下復雜的表達式，整合成一個屬性，更加方便使用、通俗易懂

模板內的表達式非常便利，但是設計它們的初衷是用於簡單運算的。在模板中放入太多的邏輯會讓模板過重且難以維護。

<div id="example">
  {{ message.split('').reverse().join('') }}
</div>

在這個地方，模板不再是簡單的聲明式邏輯。你必須看一段時間才能意識到，這里是想要顯示變量 message 的翻轉字符串。當你想要在模板中的多處包含此翻轉字符串時，就會更加難以處理。

所以，對於任何復雜邏輯，都應當使用計算屬性。

如果使用計算屬性來體現 message 的反轉字符串

<div id="example">
  {{ messageReverse }}
</div>

computed: {
  messageReverse() {
    return this.message.split("").reverse().join("");
  },
}

不僅代碼更簡潔，而且計算屬性的語義化，也使我們可以更加容易了解代碼的意義

getter和setter方法

getter

計算屬性默認有一個getter方法

computed: {
  messageReverse: {
    get() {
       return this.message.split("").reverse().join("");
    }
  },
}

一般情況下，get方法會省略不寫，get方法通常是與set方法一起出現

get方法的作用是將計算屬性的計算結果拋出，使使用計算屬性時獲得計算結果

setter

setter方法的回調函數中有一個形參 newValue ，返回到是計算屬性的計算結果

computed: {
  str: {
    get() {
       return "Hello" + "World"
    },
    set(newValue) {
      console.log(newValue); // "HelloWorld"
    }
  },
}

這樣我們就可以及時對計算結果進行后序處理