iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 8
0
Modern Web

30天手把手的vue.js教學!系列 第 8

2020it邦鐵人賽-30天手把手的Vue.js教學 Day8 - 認識computed屬性

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,你應該也能預想會看到以下的畫面。

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


上一篇
2020it邦鐵人賽-30天手把手的Vue.js教學 Day7-認識Vue-devtool
下一篇
2020it邦鐵人賽-30天手把手的Vue.js教學 Day9 - 認識watch屬性
系列文
30天手把手的vue.js教學!30

尚未有邦友留言

立即登入留言