vue3+ts定义数据和使用数据

Vue 3中使用TypeScript定义数据和使用数据的方法和Vue 2有些不同，以下是一个简单的例子：

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="incrementCounter">Click me!</button>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const message = ref('Hello, world!');
    const counter = ref(0);

    const incrementCounter = () => {
      counter.value++;
    };

    return {
      message,
      counter,
      incrementCounter,
    };
  },
});
</script>

这里使用了`defineComponent`函数来定义组件，使用`ref`函数来定义响应式数据，使用`setup`函数来初始化数据和方法，并且使用`return`语句将数据和方法导出供模板使用。

在模板中，可以使用双花括号语法来绑定数据，使用`@`符号来绑定事件。

需要注意的是，Vue 3中使用TypeScript需要在项目中安装`@vue/cli-plugin-typescript`插件，并且在`tsconfig.json`中配置好TypeScript的相关选项。