vue3_composition_api_counter_with_script_setup_typescript.ts

1<script setup lang="ts">
2import { ref, onMounted } from 'vue'
3
4// reactive state
5const count = ref<number>(0)
6
7// functions that mutate state and trigger updates
8function increment() {
9  count.value++
10}
11
12// lifecycle hooks
13onMounted(() => {
14  console.log(`The initial count is ${count.value}.`)
15})
16</script>
17
18<template>
19  <button @click="increment">Count is: {{ count }}</button>
20</template>