<template>
<div>
<h1>{{count}}</h1>
<h1>{{double}}</h1>
<button @click="increase">+1</button>
</div>
</template>
<script lang="ts">
import { ref,computed,reactive, toRefs } from ‘vue‘;
interface DataProps {
count:number;
double:number;
increase: () => void;
}
export default {
name: ‘App‘,
setup(){
const data:DataProps = reactive({
count:0,
increase:() => { data.count ++ },
double:computed(() => data.count * 2 )
})
const refData = toRefs(data)
return {
...refData
}
}
};
</script>
