Vue3：Typescript与组合式API、defineProps、defineEmits等使用

<template>
  <div>
    <h1>{{ title }}</h1>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
    <p>Count: {{ count }}</p>
  </div>
</template>
 
<script lang="ts">
import { defineComponent, ref, watchEffect } from 'vue';
 
export default defineComponent({
  setup() {
    // 使用 defineProps 定义属性并接收外部传递的值
    const props = defineProps<{
      title: string;
    }>();
 
    // 使用 ref 创建响应式数据
    const count = ref(0);
 
    // 使用 defineEmits 定义可发射的事件
    const emit = defineEmits(['updateCount']);
 
    // 定义方法进行增加和减少计数
    function increment() {
      count.value++;
      emit('updateCount', count.value);
    }
 
    function decrement() {
      count.value--;
      emit('updateCount', count.value);
    }
 
    // 使用 watchEffect 监测 count 的变化，并在控制台输出
    watchEffect(() => {
      console.log(`Count is now: ${count.value}`);
    });
 
    // 返回 setup 函数中声明的响应式数据和方法，供模板使用
    return { title, count, increment, decrement };
  }
});
</script>

这个代码实例展示了如何在Vue 3中使用TypeScript和组合式API的setup函数来创建一个响应式的计数器组件。它定义了属性、发射事件、响应式数据和方法，并展示了如何在模板中使用它们。