reactive
<template>
<div>
<h2 @click="increment">{{ count }}</h2>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
const state = reactive({
count: 0
})
const increment = () => {
state.count++
}
onMounted(() => {
console.log('组件已挂载')
})
export { state, increment }
</script>
<style>
</style>
ref
<template>
<div>
<button @click="increment">Increment</button>
<p>Count: {{ count }}</p>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const count = ref(0);
function increment() {
count.value++;
}
</script>
<style scoped>
</style>