vue3之reactive和ref学习篇

<script lang="ts" setup>
// reactive参数必须为引用类型 和ref简单类型或者引用类型
import { reactive, ref } from 'vue';
const arr = reactive([10])
const count = ref(0);
let increasing = true;
console.log(count)
const change = ()=>{if(increasing){count.value++;if(count.value===10){increasing = false}}else{count.value--;if(count.value ===0){increasing = true;}}}
</script>
<template>
<span>{{ arr[0] }}</span>
<span>{{ arr[1] }}</span>
<button @click="change">{{ count }}</button>
</template>

change函数实现了一个简单的0-10的一个自增自减的循环，之所以记录是自己写的时候费了点时间，一直在想这个判断条件怎么优化，其实条件无法继续优化了，除非一个一个数字判断或者循环，加一个标志increasing就能解决的事想了半天