計算屬性(Computed Property)

當我們今天想針對某一變數做運算或是處理時，可以透過模板內的表達式，但是在模板中放入太多的邏輯會讓模板過重且難以維護。誠如上一節所提到的觀念，我們應該把數據處理與頁面細節分開。

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

這時候我們便可以透過Vue的計算屬性來定義我們想要的邏輯。

<template>
  <div id="app">
    <span>Message: {{ msg }}</span
    ><br />
    <span>Message: {{ reversedMessage }} </span>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      msg: "Hello World!",
    };
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.msg.split("").reverse().join("");
    },
  },
};
</script>

結果如下，這裡我們聲明了一個計算屬性，並在屬性中對msg這個變數進行逆轉字串的處理。

不過，這時候你可能會發現，那我用一般的method不就可以達到一樣的效果了嗎?

的確是這樣的，我們可以使用method完成同樣的事情:

<template>
  <div id="app">
    <span>Message: {{ msg }}</span
    ><br />
    <span>Message: {{ reversedMessage() }} </span>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      msg: "Hello World!",
    };
  },
  methods: {
    reversedMessage() {
      return this.msg.split("").reverse().join("");
    },
  }
};
</script>

那計算屬性的優勢在哪裡呢? 讓我們仔細分曉。

計算快取 (Computed cache)

計算屬性的優勢在於，若資料沒有更新，則該屬性的 DOM 會顯示上一次計算好的內容，稱為 computed cache。

儘管可以使用method達到一樣的效果，但意義上來說是明確不同的。

使用method可以用以下敘述解釋，當每次 rerender 時 reverseMessage 會重新計算結果，因此如果 msg 在過程中有變更，則 reverseMesage 的結果也會跟著改變。

但若是計算屬性的話，則可以解釋為，因為我們更新了 message，這個操作會重新計算，並更新 computed cache。

使用 computed cache 的時機是，當有個需要消耗較多運算資源的資料（例如 AJAX）需要被顯示在很多地方時，若用 method 則每個地方該方法都會被重新運算，會造成相當大的資源消耗，此時有 computed cache 可以大幅增進效能。

監聽屬性(Watched Property)

Vue 提供了一種相當方便的方式來觀察Vue instance的資料，稱作監聽屬性。適用於當我們有一些資料需要隨著其它資料變動而更新時。

當 firstName 或 lastName 被更新時，watch 會去執行對應的兩個函式，進而更新 fullName。

<template>
  <div id="app">
    {{ fullName }}
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      firstName: "Foo",
      lastName: "Bar",
      fullName: "Foo Bar",
    };
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + " " + this.lastName;
    },
    lastName: function (val) {
      this.fullName = this.firstName + " " + val;
    },
  },
};
</script>

不過，由於watch屬性需要一直去監聽資料變化，相較於計算屬性會比較耗效能，所以最好評估是否真的有需要一直去監聽特定資料，不然的話，盡量使用計算屬性來代替。

Hi, I am Grant.

個人部落格 - https://grantliblog.wordpress.com/
個人網站 - https://grantli-website.netlify.app/#/mainpage
我的寫作專題 - https://vocus.cc/user/5af2e9b5fd89780001822db4#