Hi Dai Gei Ho~ 我是Winnie~
在今天文章中 我们主要会针对 Composition API 中的 computed 使用方法来做介绍,computed 相信有接触过 Vue的捧油们 应该会它不太陌生,虽然在 Composition API 中 用法有所改变,但关於 computed 的功能概念 目前还是相同的 ,所以大家可以一起看看。
如果对於 computed 不熟的朋友 ,也可以参考 Kuro大大的 008天Vue3.js
由於 前几天刚看完最近很夯的 鱿鱼游戏,所以突发奇想,想让大家一起回到童年时光 回忆下 人生的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
进行读取。
另外 如果今天我们要指定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 祝大家周末愉快~,如有问题欢迎大家给予指教,谢谢大家。
<<: Day16:SwiftUI—GeometryReader
使用首页、输入画面、输出画面等三个基础画面,来熟悉画面之间跳转及资料移动的原理。 本练习不涉及业务...
避免像去年一样焦头烂额,这次提前至 7 月开始准备铁人赛, 即便提早准备,也不知要写什麽... 只准...
今天主要要来介绍这三个元件及彼此之间一个简单的应用,首先先来提一下EditText、textView...
缘由: 开发App分版本是很常见的,例如免费版vs.付费版,中文版vs.英文版vs.韩文版等,我开发...
昨天已经做过了导览列的介绍,那我们今天就学习用 HTML 和 CSS 基本的语法,来试着做一个简单的...