Vue.js (6) - 計算屬性

Vue.js

為了讓 View 專注在顯示資料，你應該將需要複雜計算的程式邏輯抽離，讓顯示 View 的模版簡潔，Vue 設計了一個計算屬性讓你這麼做。

計算屬性

使用範例：

HTML<div id="vm">
  原本的內容：
  <p>{{ content }}</p>
  <hr>
  摘要：
  <p>{{ summary }}</p>
</div>

<script>
var vm = new Vue({
  el: '#vm',
  data: {
    content: '為了讓 View 簡單化，你應該將需要複雜計算的程式邏輯抽離，讓顯示 View 的模版簡潔，Vue 設計了一個計算屬性讓你這麼做。'
  },
  computed: {
    summary: function () {
      if (this.content.length > 20) {
       return this.content.slice(0, 17) + '...'
      }
      return this.content
    }
  }
})
</script>

輸出結果： 我們前面已經用過 el、data、filters、methods這幾個選項物件中的屬性，現在又用到一個新的 computed 稱為計算屬性。它的用途和 data 相同，都是資料，差別在於，data 是直接指定內容，而 computed 是一個函式，它的資料會先經過計算，而且可以將 data 中的資料當成計算依據。在 computed 中的函式，可以透過 this 來取得 data 中的資料。

計算屬性 (computed) 與方法 (methods) 的差別

在計算屬性的做法其實拿到方法中是差不多的：

HTML<!-- 在雙括號中改為呼叫方法 -->
<p>{{ summaryMethod() }}</p>

// 在 computed 中的計算屬性 summary，現在原封不動的移動到 methods 中

差別除了一個是回傳資料，一個是呼叫函式然後由其回傳值之外，它的行為會略有不同。

計算 (computed) 屬性依賴資料來進行運算，並且會將運算結果暫存，也就是說，和它相依的資料如果沒有發生改變，它就不會再次運算，而是直接回傳暫存的資料，只有當相依的資料發生改變，它才會執行運算。

方法 (methods) 屬性則是無論如何，只要被呼叫就會執行運算。
測試範例：

HTML<div id="vm">
  原本的內容：
  <p>{{ content }}</p>
  <hr>
  摘要：
  <p>{{ summaryMethod() }}</p>
  <p>{{ summaryMethod() }}</p>
  <p>{{ summaryMethod() }}</p>

  <p>{{ summaryComputed }}</p>
  <p>{{ summaryComputed }}</p>
  <p>{{ summaryComputed }}</p>
</div>

<script>
var vm = new Vue({
  el: '#vm',
  data: {
 content: '為了讓 View 簡單化，你應該將需要複雜計算的程式邏輯抽離，讓顯示 View 的模版簡潔，Vue 設計了一個計算屬性讓你這麼做。'
  },
  methods: {
    summaryMethod: function () {
      console.log('method')
      if (this.content.length > 20) {
       return this.content.slice(0, 17) + '...'
      }
      return this.content
    }
  },
  computed: {
    summaryComputed: function () {
      console.log('compute')
      if (this.content.length > 20) {
        return this.content.slice(0, 17) + '...'
      }
      return this.content
    }
  }
})
</script>

在瀏覽器的主控台 (console) 的 log 中可以看到 method 會顯示 3 次，而 compute 則只有 1 次。

如果要大量的運算而且運算過後資料並不會改變的話，就用計算 (computed) 屬性，相反的，如果你需要每次都進行運算而不要暫存運算結果，就用方法 (methods) 屬性。

本文網址：http://blog.tonycube.com/2017/04/vuejs-6-computed.html
由 Tony Blog 撰寫，請勿全文複製，轉載時請註明出處及連結，謝謝 😀