Vue 3 + Ts 钩子函数（hooks）的用法，以＜script setup lang=“ts“/＞语法糖形式 #reactive #ref

reactive

<template>
  <div>
    <h2 @click="increment">{{ count }}</h2>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'

// 使用reactive创建响应式数据
const state = reactive({
  count: 0
})

// 定义一个增加count的方法
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>