tags: Vue.js ItIron2020

前言

在昨天輕鬆的內容中我們介紹了如何利用vue-devtool去協助你了解組件中到底發生了什麼事情，在日後會是個很實用的小幫手，相信我?
今天我們要來介紹另一個vue中極端常見的屬性，computed，事不宜遲我們馬上開始吧!

什麼是computed

computed是vue實體中的另一個屬性，它一般是用來處理需要運算後才顯示在template的資料，它的特點是當相依的資料更新時，它也會重新計算應該回傳的值。 我知道文字說明沒人會懂，但原文就差不多這個意思~! 我們還是來看個簡單的範例吧! 老樣子，懶得開demo就直接看程式碼吧!

<template>
  <div id="app">
    <label for="firstname">Firstname</label>
    <input type="text" name="firstname"  v-model="firstName">
    <label for="lastname">Lasttname</label>
    <input type="text" name="lastname" v-model="lastName">
    <h2>{{fullName}}</h2>
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: '',
      lastName: ''
    };
  },
  methods: {
    
  },
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName
    }
  }
};
</script>

仔細觀察一下上方的程式碼，就算你還不熟悉computed，你應該也能預想會看到以下的畫面。

接著請你跟我這樣做~隨便去修改firstName或是lastName的值，你會發現computed中的fullName回傳的值也不相同了! 這就是我剛剛說過的當相依的data變動時，computed對應的值也會重新計算後回傳。這個例子中，fullName是與firstName、lastName相依，當裡面的屬性有變化時，fullName就會重新計算並回傳你想要的值去印在template中，絕對絕對需要注意的是，computed必定要return某個值，否則你會看不到你想看的結果:D

我非用computed不可嗎?

這個問題問得很好，其實以你目前所學，你也可以印出以上的結果，最最最直覺想到的應該是直接在template中利用firstName & lastName印出，雖然較長、但還是可以達到你要的結果。

<h2>{{firstName}} {{lastName}}</h2>

此種情境下，這樣的作法沒什麼不可以! 不過要是你今天要處理的運算邏輯變得更為複雜時，你應該可以預見相當雜亂的template，後續維護會讓你想揍當時的自己。

換個想法，利用methods寫一個會回傳一模一樣結果的函數，並直接用在template中。 這樣的做法看起來就沒有什麼不可以了，一樣會有預期的結果、當運算更複雜時也能在methods中處理掉，template還是可以維持得很乾淨! 那為什麼我們不乾脆用methods就好了? 這就是下一個要探討的問題!

<h3>{{getFullName()}}</h3>

methods: {
    getFullName() {
      return `${this.firstName} ${this.lastName}`
    }
}

methods vs computed

兩者用在渲染上確實可以有相同的結果，這點無庸置疑，但有個決定性的差別讓我們需要computed這玩意!

computed只有在資料有變化時才會重新計算

因為computed本身是cache-based，當資料相同時，他就會用舊有的資料，直到相依的資料被更新時才會重新計算。相反的，method則是你一次呼叫時都會重新算一次，我們將原先的範例做個簡單的修改，相信很快你就會我懂得意思了!

    <h2>{{fullName}}</h2>
    <h2>{{fullName}}</h2> //加入這行
    <h2>{{fullName}}</h2> //加入這行
    <h3>{{getFullName()}}</h3>
    <h3>{{getFullName()}}</h3> //加入這行
    <h3>{{getFullName()}}</h3> //加入這行


  methods: {
    getFullName() {
      console.log('method has been called') //加入這行
      return `${this.firstName} ${this.lastName}`
    }
  },
  computed: {
    fullName() {
      console.log('computed has been called') //加入這行
      return this.firstName + ' ' + this.lastName
    }
  }

打開你的console看，你應該會在console內看到以下的結果

computed has been called
method has been called
method has been called
method has been called

你瞧! 同樣印出三行，computed在這種情況下就是比較優秀，所以一般來說，我們會建議你記住以下的原則

• computed 用在data屬性中，資料的延伸操作上(比方說將原本沒排序的陣列排序)
• methods 用在事件觸發的handler或是在vue實體中的函數上

這樣的話你就比較不會搞混什麼時候該用什麼囉!

結語

今天我們介紹了computed最基礎的用法，坦白說它還是有許多眉角在的，我們之後在練習中還會再碰到它，不需要太急躁:D 熟練地使用computed會是相當重要的事情，但只要記住幾個小原則，它其實相當的容易使用? 今天就先講到這邊，我們明天再見囉!

此文章同步發布於個人部落格，有興趣的大大也可以來參觀一下:D