Day_19 : 让 Vite 来开启你的Vue 之 计算属性 Computed

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的话，也可以透过 传入物件 来指定 get与 set。

用法如下:(这边就不用木头人了，因为太长了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 祝大家周末愉快～，如有问题欢迎大家给予指教，谢谢大家。