iT邦幫忙

2021 iThome 鐵人賽

DAY 19
0
Modern Web

前端黑洞計畫 (一) : 讓 Vite 來開啟你的Vue系列 第 19

Day_19 : 讓 Vite 來開啟你的Vue 之 計算屬性 Computed

  • 分享至 

  • xImage
  •  

Hi Dai Gei Ho~ 我是Winnie~

在今天文章中 我們主要會針對 Composition API 中的 computed 使用方法來做介紹,computed 相信有接觸過 Vue的捧油們 應該會它不太陌生,雖然在 Composition API 中 用法有所改變,但關於 computed 的功能概念 目前還是相同的 ,所以大家可以一起看看。

如果對於 computed 不熟的朋友 ,也可以參考 Kuro大大的 008天Vue3.js

Composition API 中的 Computed

由於 前幾天剛看完最近很夯的 魷魚遊戲,所以突發奇想,想讓大家一起回到童年時光 回憶下 人生的123木頭人 (自創):

介紹下規則XD:

角色的Component ,裡面會有它 裡面會有角色的編號(characterNum)、血量狀態(HP)、前進步數(step),還有他的動作,以click 為主(你將成為他,決定他的生死),規則是 當今天血量少於0 直接斃了 ,血量等於10,成功

//Character.js
<template>

    <div v-show='HP < 0'> Game Over</div> // 當血量少於0 顯示Game over
    <div v-show='HP === 10'>Success</div>
    
    // 角色資訊
    <div>Character :{{characterNum}}</div>
    <div>HP: {{HP}}</div>
    <div>step : {{step}}</div>
    <div>HP:{{HP}}</div>
    
    // 動作執行
    <button @click="goForward">逃命啊</button>
    <button @click="goDie">啊~死了</button>
</template>
<script>
import { ref, computed, onUpdated } from 'vue'
export default{
  setup(){
    const characterNum = '456' 
    const initHP = ref(1)
    const step = ref(0)
    const HP = computed(()=> initHP.value += step.value)//computed 參數為一個getter 函式

    const goForward = ()=> step.value ++
    
    const goDie = ()=> step.value - 10
    
    onUpdated(()=>{
     console.log(HP.value)// computed會回傳一個ref物件,所以讀取內部值時需要加上.value
    })
        
   
    return {
     characterNum,    //將資料傳出去給模板使用
     HP,
     step,
     goForward,
     goDie
    }
  }
}

回到正題,從以上 (人生的)123 木頭人 範例中,我們可以看到 在Composition API 中 computed()參數為一個 getter 函式,同時會回傳一個ref物件來進行響應,所以當我們今天要取 computed中的值時,一樣也需要透過 .value進行讀取。

get 與 set

另外 如果今天我們要指定set的話,也可以透過 傳入物件 來指定 getset

用法如下:(這邊就不用木頭人了,因為太長了XD)


<script>
import { ref, computed, onUpdated } from 'vue'
export default{
  setup(){

    const count = ref(1)
    const setCount = computed({
    get:()=> count.value +1,
    set:(val)=> count.value =val-1
    })
        
  }
}

以上就是就是關於computed在 Composition API中 的使用方法,Happy Friday 祝大家週末愉快~,如有問題歡迎大家給予指教,謝謝大家。


上一篇
Day_18 : 讓 Vite 來開啟你的Vue 之 toRef & toRefs
下一篇
Day_20 : 讓 Vite 來開啟你的Vue 之 watch & watchEffect
系列文
前端黑洞計畫 (一) : 讓 Vite 來開啟你的Vue30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言